// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

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

/*
Control groups

Markup:
<div class="pt-control-group">
  <button class="pt-button pt-icon-filter">Filter</button>
  <input type="text" class="pt-input" placeholder="Find filters..." />
</div>
<div class="pt-control-group">
  <div class="pt-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="pt-input-group">
    <span class="pt-icon pt-icon-search"></span>
    <input type="text" class="pt-input" value="from:ggray to:allorca" />
  </div>
</div>
<div class="pt-control-group">
  <div class="pt-input-group">
    <span class="pt-icon pt-icon-people"></span>
    <input type="text" class="pt-input" placeholder="Find collaborators..." style="padding-right:94px" />
    <div class="pt-input-action">
      <button class="pt-button pt-minimal pt-intent-primary">
        can view<span class="pt-icon-standard pt-icon-caret-down pt-align-right"></span>
      </button>
    </div>
  </div>
  <button class="pt-button pt-intent-primary">Add</button>
</div>

Styleguide pt-control-group
*/

.pt-control-group {
  // create a new stacking context to isolate all the z-indices
  @include new-render-layer();
  display: flex;
  align-items: flex-start;

  // apply these properties to all direct children, too many permutations to enumerate
  // stylelint-disable selector-no-universal
  > * {
    flex: 0 0 auto;
  }

  // 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).

  .pt-button,
  .pt-input,
  .pt-select {
    // create a new stacking context
    position: relative;
  }

  .pt-input {
    z-index: index($control-group-stack, "input-default");
    // inherit radius since it's most likely to be zero
    border-radius: inherit;

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

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

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

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

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

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

  .pt-button,
  .pt-select select {
    z-index: index($control-group-stack, "button-default");
    // inherit radius since it's most likely to be zero
    border-radius: inherit;

    &:focus {
      // establish new stacking context so focus state covers neighbors
      position: relative;
      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,
    &.pt-disabled {
      z-index: index($control-group-stack, "button-disabled");
    }

    &[class*="pt-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,
      &.pt-disabled {
        z-index: index($control-group-stack, "intent-button-disabled");
      }
    }
  }

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

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

  // have consecutive elements share a border
  &:not(.pt-vertical) {
    > * {
      margin-right: -$button-border-width;
    }

    .pt-dark & {
      > * {
        margin-right: 0;
      }

      // consecutive buttons within a button group look okay out of the box, but
      // we need need to make a small correction for non-grouped buttons. this
      // replicates what's already done in dark theme button groups.
      > .pt-button + .pt-button {
        margin-left: $button-border-width;
      }
    }
  }

  // round the left corners of the left-most element
  > :first-child {
    border-radius: $pt-border-radius 0 0 $pt-border-radius;
  }

  // round the right corners of the right-most element
  > :last-child {
    margin-right: 0;
    border-radius: 0 $pt-border-radius $pt-border-radius 0;
  }

  // bring back border radius on these buttons
  .pt-input-group .pt-button {
    border-radius: $pt-border-radius;
  }

  /*
  Responsive control groups

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

  Styleguide pt-control-group.pt-fill
  */

  > .pt-fill {
    flex: 1 1 auto;
  }

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

  /*
  Vertical control groups

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

  Styleguide pt-control-group.pt-vertical
  */

  &.pt-vertical {
    flex-direction: column;

    > * {
      margin-top: -$button-border-width;
      width: 100%;
    }

    > :first-child {
      margin-top: 0;
      border-radius: $pt-border-radius $pt-border-radius 0 0;
    }

    > :last-child {
      border-radius: 0 0 $pt-border-radius $pt-border-radius;
    }
  }
}