// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../button/common";
@import "./common";
@import "../divider/divider";

/*
Control groups

Markup:
<div class="#{$ns}-control-group">
  <button class="#{$ns}-button #{$ns}-icon-filter">Filter</button>
  <input type="text" class="#{$ns}-input" placeholder="Find filters..." />
</div>
<div class="#{$ns}-control-group">
  <div class="#{$ns}-select">
    <select>
      <option selected>Filter...</option>
      <option value="1">Issues</option>
      <option value="2">Requests</option>
      <option value="3">Projects</option>
    </select>
  </div>
  <div class="#{$ns}-input-group">
    <span class="#{$ns}-icon #{$ns}-icon-search"></span>
    <input type="text" class="#{$ns}-input" value="from:ggray to:allorca" />
  </div>
</div>
<div class="#{$ns}-control-group">
  <div class="#{$ns}-input-group">
    <span class="#{$ns}-icon #{$ns}-icon-people"></span>
    <input type="text" class="#{$ns}-input" placeholder="Find collaborators..." style="padding-right:94px" />
    <div class="#{$ns}-input-action">
      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-primary">
        can view<span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
      </button>
    </div>
  </div>
  <button class="#{$ns}-button #{$ns}-intent-primary">Add</button>
</div>
<div class="#{$ns}-control-group">
  <div class="#{$ns}-select">
    <select>
      <option selected value="dollar">$</option>
      <option value="euro">€</option>
    </select>
  </div>
  <div class="#{$ns}-control-group #{$ns}-numeric-input">
    <div class="#{$ns}-input-group">
      <input type="text" autocomplete="off" class="#{$ns}-input" style="padding-right: 10px;" value="1">
    </div>
    <div class="#{$ns}-button-group #{$ns}-vertical #{$ns}-fixed">
      <button type="button" class="#{$ns}-button">
        <span icon="chevron-up" class="#{$ns}-icon #{$ns}-icon-chevron-up">
          <svg data-icon="chevron-up" width="16" height="16" viewBox="0 0 16 16"><desc>chevron-up</desc><path d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z" fill-rule="evenodd"></path></svg>
        </span>
      </button>
      <button type="button" class="#{$ns}-button">
        <span icon="chevron-down" class="#{$ns}-icon #{$ns}-icon-chevron-down">
          <svg data-icon="chevron-down" width="16" height="16" viewBox="0 0 16 16"><desc>chevron-down</desc><path d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z" fill-rule="evenodd"></path></svg>
        </span>
      </button>
    </div>
  </div>
</div>

Styleguide control-group
*/

.#{$ns}-control-group {
  // create a new stacking context to isolate all the z-indices
  @include new-render-layer();
  @include pt-flex-container(row);
  // each child is full height
  align-items: stretch;

  // similarly to button groups, elements in control groups are stacked in a
  // very particular order for best visual results. in each level of selector
  // specificity, we define disabled styles last so that they override all other
  // equally-specific styles (e.g. we don't want mouse interactions or focus
  // changes to change the z-index of a disabled element).

  .#{$ns}-button,
  .#{$ns}-html-select,
  .#{$ns}-input,
  .#{$ns}-select {
    // create a new stacking context
    position: relative;
  }

  .#{$ns}-input {
    z-index: index($control-group-stack, "input-default");

    &:focus {
      z-index: index($control-group-stack, "input-focus");
    }

    &[class*="#{$ns}-intent"] {
      z-index: index($control-group-stack, "intent-input-default");

      &:focus {
        z-index: index($control-group-stack, "intent-input-focus");
      }
    }

    &[readonly],
    &:disabled,
    &.#{$ns}-disabled {
      z-index: index($control-group-stack, "input-disabled");
    }
  }

  .#{$ns}-input-group[class*="#{$ns}-intent"] .#{$ns}-input {
    z-index: index($control-group-stack, "intent-input-default");

    &:focus {
      z-index: index($control-group-stack, "intent-input-focus");
    }
  }

  .#{$ns}-button,
  .#{$ns}-html-select select,
  .#{$ns}-select select {
    @include new-render-layer();
    z-index: index($control-group-stack, "button-default");

    &:focus {
      z-index: index($control-group-stack, "button-focus");
    }

    &:hover {
      z-index: index($control-group-stack, "button-hover");
    }

    &:active {
      z-index: index($control-group-stack, "button-active");
    }

    &[readonly],
    &:disabled,
    &.#{$ns}-disabled {
      z-index: index($control-group-stack, "button-disabled");
    }

    &[class*="#{$ns}-intent"] {
      z-index: index($control-group-stack, "intent-button-default");

      &:focus {
        z-index: index($control-group-stack, "intent-button-focus");
      }

      &:hover {
        z-index: index($control-group-stack, "intent-button-hover");
      }

      &:active {
        z-index: index($control-group-stack, "intent-button-active");
      }

      &[readonly],
      &:disabled,
      &.#{$ns}-disabled {
        z-index: index($control-group-stack, "intent-button-disabled");
      }
    }
  }

  // input group contents appear above input always
  .#{$ns}-input-group > .#{$ns}-icon,
  .#{$ns}-input-group > .#{$ns}-button,
  .#{$ns}-input-group > .#{$ns}-input-left-container,
  .#{$ns}-input-group > .#{$ns}-input-action {
    z-index: index($control-group-stack, "input-group-children");
  }

  // keep the select-menu carets on top of everything always (particularly when
  // .#{$ns}-selects are focused).
  .#{$ns}-select::after,
  .#{$ns}-html-select::after,
  .#{$ns}-select > .#{$ns}-icon,
  .#{$ns}-html-select > .#{$ns}-icon {
    z-index: index($control-group-stack, "select-caret");
  }

  // select container does not get focus directly (its <select> does), and it
  // sometimes needs to compete with adjacent container elements
  .#{$ns}-select:focus-within {
    z-index: index($control-group-stack, "button-focus");
  }

  &:not(.#{$ns}-vertical) {
    > :not(:last-child) {
      margin-right: 2px;
    }
  }

  // special handling of numeric input, which is a nested control group itself
  .#{$ns}-numeric-input:not(:first-child) .#{$ns}-input-group {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  /*
  Responsive control groups

  Markup:
  <div class="#{$ns}-control-group">
    <div class="#{$ns}-input-group #{$ns}-fill">
      <span class="#{$ns}-icon #{$ns}-icon-people"></span>
      <input type="text" class="#{$ns}-input" placeholder="Find collaborators..." />
    </div>
    <button class="#{$ns}-button #{$ns}-intent-primary">Add</button>
  </div>
  <div class="#{$ns}-control-group #{$ns}-fill">
    <button class="#{$ns}-button #{$ns}-icon-minus #{$ns}-fixed"></button>
    <input type="text" class="#{$ns}-input" placeholder="Enter a value..." />
    <button class="#{$ns}-button #{$ns}-icon-plus #{$ns}-fixed"></button>
  </div>

  Styleguide control-group-fill
  */
  &.#{$ns}-fill {
    width: 100%;
  }

  > .#{$ns}-fill {
    flex: 1 1 auto;
  }

  &.#{$ns}-fill > *:not(.#{$ns}-fixed) {
    flex: 1 1 auto;
  }

  /*
  Vertical control groups

  Markup:
  <div class="#{$ns}-control-group #{$ns}-vertical" style="width: 300px;">
    <div class="#{$ns}-input-group #{$ns}-large">
      <span class="#{$ns}-icon #{$ns}-icon-person"></span>
      <input type="text" class="#{$ns}-input" placeholder="Username" />
    </div>
    <div class="#{$ns}-input-group #{$ns}-large">
      <span class="#{$ns}-icon #{$ns}-icon-lock"></span>
      <input type="password" class="#{$ns}-input" placeholder="Password" />
    </div>
    <button class="#{$ns}-button #{$ns}-large #{$ns}-intent-primary">Login</button>
  </div>

  Styleguide control-group-vertical
  */

  &.#{$ns}-vertical {
    flex-direction: column;

    > :not(:last-child) {
      margin-bottom: 2px;
    }
  }
}
