/*
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@import './select-outline';
@import './select-filled';
@import './select-hero';

@mixin el-select-theme() {
  el-select {
    .select-button {
      min-width: el-theme(select-min-width);
      cursor: el-theme(select-cursor);

      &.placeholder {
        font-weight: el-theme(select-placeholder-text-font-weight);
      }
      &:focus {
        box-shadow: 0 0 0 el-theme(select-outline-width) el-theme(select-outline-color);
        outline: none;
      }
      &[disabled] {
        cursor: el-theme(select-disabled-cursor);
      }
    }
  }

  .options-list-container {
    box-shadow: el-theme(select-options-list-shadow);
    border-style: el-theme(select-options-list-border-style);
    border-width: el-theme(select-options-list-border-width);
    overflow: hidden;

    &.top {
      border-bottom: none;
    }

    &.bottom {
      border-top: none;
    }

    & > .options-list {
      margin: 0;
      padding: 0;
    }
  }

  .options-list {
    background-color: el-theme(select-option-background-color);
    max-height: el-theme(select-options-list-max-height);
    height: 100%;
    overflow: auto;
  }

  el-option {
    user-select: none;

    &:focus {
      outline: none;
    }
  }

  el-select .select-button,
  el-option,
  el-option-group {
    font-family: el-theme(select-text-font-family);
    font-weight: el-theme(select-text-font-weight);
  }

  @each $size in el-get-sizes() {
    el-select.size-#{$size} .select-button,
    .size-#{$size} el-option {
      font-size: el-theme(select-#{$size}-text-font-size);
      line-height: el-theme(select-#{$size}-text-line-height);
    }

    el-select.size-#{$size} .select-button.empty::before {
      content: ' ';
      display: block;
      height: el-theme(select-#{$size}-text-line-height);
    }

    el-select.size-#{$size}:not(.full-width),
    .options-list:not(.full-width) {
      max-width: el-theme(select-#{$size}-max-width);
    }
  }

  @each $shape in el-get-shapes() {
    el-select.shape-#{$shape} .select-button {
      border-radius: el-theme(select-#{$shape}-border-radius);
    }

    .options-list-container.shape-#{$shape} {
      &.bottom {
        border-bottom-left-radius: el-theme(select-#{$shape}-border-radius);
        border-bottom-right-radius: el-theme(select-#{$shape}-border-radius);
      }
      &.top {
        border-top-left-radius: el-theme(select-#{$shape}-border-radius);
        border-top-right-radius: el-theme(select-#{$shape}-border-radius);
      }
    }
  }

  el-option-group,
  el-option {
    background-color: el-theme(select-option-background-color);
    color: el-theme(select-option-text-color);

    &[disabled] {
      background-color: el-theme(select-option-disabled-background-color);
      color: el-theme(select-option-disabled-text-color);
    }
  }

  el-option {
    &.selected {
      background-color: el-theme(select-option-selected-background-color);
      color: el-theme(select-option-selected-text-color);
    }
    &:focus {
      background-color: el-theme(select-option-focus-background-color);
      color: el-theme(select-option-focus-text-color);
    }
    &:hover {
      background-color: el-theme(select-option-hover-background-color);
      color: el-theme(select-option-hover-text-color);
    }
  }

  @include select-outline();
  @include select-filled();
  @include select-hero();
}