@import 'mixins/form';
@import 'mixins/size';

@include b(compose) {
  @include component-in-form('#{&}') {
    width: 100%;
  }

  $compose-support: "[data-compose-support='true']";
  $compose-support--active: "[data-compose-support-active='true']";
  $compose-support--disabled: "[data-compose-support-disabled='true']";

  display: inline-flex;
  align-items: stretch;
  vertical-align: top;

  #{$compose-support} {
    &#{$compose-support--disabled} {
      z-index: 0;
    }

    &:not(#{$compose-support--disabled}) {
      z-index: 1;

      &:hover {
        z-index: 5;
      }

      &[data-form-invalid-warning='true'] {
        z-index: 6;
      }

      &[data-form-invalid-error='true'] {
        z-index: 7;
      }

      &:focus,
      &#{$compose-support--active} {
        z-index: 10;
      }
    }
  }

  &:not(#{&}--vertical) {
    & > :not(:first-child):not(:only-child) {
      margin-left: -1px !important;
    }

    & > :first-child:not(:only-child) {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    & > :last-child:not(:only-child) {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    & > :not(:first-child):not(:last-child) {
      border-radius: 0 !important;
    }
  }

  @include m(vertical) {
    flex-direction: column;

    & > :not(:first-child):not(:only-child) {
      margin-top: -1px !important;
    }

    & > :first-child:not(:only-child) {
      border-bottom-right-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    & > :last-child:not(:only-child) {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }

    & > :not(:first-child):not(:last-child) {
      border-radius: 0 !important;
    }
  }
}

@include b(compose-item) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--#{$rd-prefix}size);
  height: var(--#{$rd-prefix}size);
  padding: 0 calc(var(--#{$rd-prefix}padding-size) - 1px);
  white-space: nowrap;
  border: 1px solid var(--#{$rd-prefix}color-border);
  border-radius: var(--#{$rd-prefix}border-radius);

  @include component-size;

  @include when(disabled) {
    color: var(--#{$rd-prefix}color-disabled);
    pointer-events: none;
    background-color: var(--#{$rd-prefix}background-color-disabled);
  }

  @include m(gray) {
    background-color: var(--#{$rd-prefix}background-color-light-gray);
  }
}