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

@use "sass:list";
@import "../../common/variables";
@import "../button/common";
@import "./common";
@import "../divider/divider";

.#{$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: list.index($control-group-stack, "input-default");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      &[readonly],
      &:disabled,
      &.#{$ns}-disabled {
        z-index: list.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: list.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: list.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}-html-select:focus-within,
  .#{$ns}-select:focus-within {
    z-index: list.index($control-group-stack, "button-focus");
  }

  &:not(.#{$ns}-vertical) {
    > :not(:last-child) {
      margin-right: $pt-spacing * 0.5;
    }
  }

  // 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;
  }

  &.#{$ns}-fill {
    width: 100%;
  }

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

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

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

    > :not(:last-child) {
      margin-bottom: $pt-spacing * 0.5;
    }
  }
}