/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// Use of stylelint-disable-next-line declaration-no-important in this file is to ensure that
// the correct styles are applied for Internet Explorer 11 and are not overriden by system styles.

@import '~bpk-mixins/index';

$bpk-spacing-v2: true;

.bpk-select {
  @include bpk-select;

  &--large {
    @include bpk-select--large;
  }

  &--docked {
    @include bpk-select--docked;

    &-first {
      @include bpk-select--docked-first-child;
    }

    &-middle {
      @include bpk-select--docked-middle-child;
    }

    &-last {
      @include bpk-select--docked-last-child;
    }
  }

  &--with-image {
    padding-left: bpk-spacing-xxl();

    @include bpk-rtl {
      padding-right: bpk-spacing-xxl();
      padding-left: bpk-spacing-xxl();

      @media screen\0 {
        /* stylelint-disable-next-line declaration-no-important */
        padding-right: bpk-spacing-xxl() !important;
        /* stylelint-disable-next-line declaration-no-important */
        padding-left: bpk-spacing-base() !important;
      }
    }

    @media screen\0 {
      /* stylelint-disable-next-line declaration-no-important */
      padding-left: bpk-spacing-xxl() !important;
    }
  }

  &--with-image-large {
    padding-left: bpk-spacing-xxl() + bpk-spacing-sm();

    @include bpk-rtl {
      padding-right: bpk-spacing-xxl() + bpk-spacing-sm();
      padding-left: $bpk-select-padding-right;

      @media screen\0 {
        padding-right: bpk-spacing-xxl() + bpk-spacing-sm() !important; /* stylelint-disable-line declaration-no-important */
        /* stylelint-disable-next-line declaration-no-important */
        padding-left: bpk-spacing-base() !important;
      }
    }

    @media screen\0 {
      padding-left: bpk-spacing-xxl() + bpk-spacing-sm() !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  &--invalid {
    @include bpk-select--invalid;
  }
}

$select-image-width: 24 * $bpk-one-pixel-rem;
$select-image-height: 16 * $bpk-one-pixel-rem;
$select-image-large-width: 32 * $bpk-one-pixel-rem;
$select-image-large-height: 24 * $bpk-one-pixel-rem;

.bpk-select-wrapper {
  position: relative;

  &__image {
    position: absolute;
    top: bpk-spacing-sm() * 3;
    left: bpk-spacing-md();
    width: $select-image-width;
    height: $select-image-height;
    pointer-events: none;

    @include bpk-rtl {
      right: bpk-spacing-md();
      left: auto;
    }

    &--large {
      top: bpk-spacing-sm() * 3;
      width: $select-image-large-width;
      height: $select-image-large-height;
    }

    &--disabled {
      opacity: 0.5;
    }
  }
}