@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$selects-corner-radius: $border-radius-sm !default;
$selects-dropdown-arrow-color: "black" !default;
$selects-padding: 0px 10px !default;

$selects-placeholder-text-color: rgba(map-get($denali-grey-colors,"800"), 0.6) !default;
$selects-default-bg: rgba(map-get($denali-brand-colors,"300"), 0.08) !default;
$selects-default-text-color: map-get($denali-grey-colors,"800") !default;
$selects-default-border: none !default;
$selects-focus-border: inset 0 -2px rgba(map-get($denali-brand-colors,"300"), 1) !default;
$selects-disabled-bg: rgba(map-get($denali-grey-colors,"800"), 0.05) !default;
$selects-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), 0.25) !default;
$selects-disabled-border: inset 0 -2px rgba(map-get($denali-grey-colors,"800"), 0.05) !default;
$selects-error-border: inset 0 -2px map-get($denali-status-colors,"danger") !default;

$selects-sizes-default-width: 250px !default;
$selects-sizes-sm-height: 24px !default;
$selects-sizes-md-height: 32px !default; 
$selects-sizes-default-height: 36px !default;
$selects-sizes-lg-height: 44px !default;

@mixin selects-default {
  .input {
    &.has-arrow:before {
      content: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path style="fill:#{$fields-dropdown-arrow-color}" d="M24,27.17,13.4,16.59a2,2,0,0,0-3.05.25,2.07,2.07,0,0,0,.3,2.65L22.59,31.41a2,2,0,0,0,2.83,0L37.35,19.49a2.07,2.07,0,0,0,.3-2.65,2,2,0,0,0-3-.25Z"/></svg>');
      pointer-events: none;
      opacity: .4;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      height: 18px;
      width: 18px;
    }

    // Select dropdown
    select {
      background: $selects-default-bg;
      border-radius: $selects-corner-radius;
      color: $selects-default-text-color;
      height: $selects-sizes-default-height;
      box-shadow: $selects-default-border;
      appearance: none;
      -webkit-appearance: none;
      flex: 1 0 auto;
      font: inherit;
      outline: none;
      border: none;
      text-align: left;
      width: inherit;
      margin: 0;
      position: relative;
      padding: $selects-padding;

      option {
        color: black;
      }

      &:active,
      &:focus,
      &[disabled] {
        transition: 300ms;
      }

      &:invalid {
        box-shadow: inset 0 -2px 0 map-get($denali-status-colors,"danger");
      }

      &::placeholder {
        color: $selects-placeholder-text-color;
      }

      &:active,
      &:focus {
        box-shadow: $selects-focus-border;
      }

      &[disabled] {
        background: $selects-disabled-bg;
        box-shadow: $selects-disabled-border;
      }
    }

    // Forced Active State
    &.is-active > select {
      box-shadow: $selects-focus-border;
    }

    // Error state
    &.is-error > select {
      box-shadow: $selects-error-border;
    }

    // Inverse
    &.is-inverse { 
      &.has-arrow:before {
        content: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path style="fill:white;" d="M24,27.17,13.4,16.59a2,2,0,0,0-3.05.25,2.07,2.07,0,0,0,.3,2.65L22.59,31.41a2,2,0,0,0,2.83,0L37.35,19.49a2.07,2.07,0,0,0,.3-2.65,2,2,0,0,0-3-.25Z"/></svg>');
      }

      select {
        background: rgba(242, 242, 242, 0.1);
        color: map-get($denali-grey-colors,"100");

        &::placeholder {
          color: rgba(map-get($denali-grey-colors,"100"), 0.6);
        }

        &:active,
        &:focus {
          background: rgba(242, 242, 242, 0.1);
          box-shadow: inset 0 -2px 0 map-get($denali-brand-colors,"400");
        }

        &[disabled] {
          background: rgba(map-get($denali-grey-colors,"100"), 0.1);
          box-shadow: inset 0 -2px 0 rgba(map-get($denali-grey-colors,"100"), 0.05);
          color: rgba(map-get($denali-grey-colors,"100"), 0.1);

          &::placeholder {
            color: rgba(map-get($denali-grey-colors,"100"), 0.2);
          }
        }
      }
    }

    // Sizes
    &.is-large > select {
      height: $selects-sizes-lg-height;
      // margin-top: 6px;
    }
    
    &.is-medium > select {
      height: $selects-sizes-md-height;
      // margin-top: 6px;
    }

    &.is-small > select {
      height: $selects-sizes-sm-height;
      // margin-top: 5px;
    }

    // Full Width
    &.is-full {
      width: 100%;
    }
  }
}

@mixin selects-theme {
    .input {

      &.has-arrow:before {
        content: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path style="fill:#{$selects-dropdown-arrow-color}" d="M24,27.17,13.4,16.59a2,2,0,0,0-3.05.25,2.07,2.07,0,0,0,.3,2.65L22.59,31.41a2,2,0,0,0,2.83,0L37.35,19.49a2.07,2.07,0,0,0,.3-2.65,2,2,0,0,0-3-.25Z"/></svg>');
      }

      // Select dropdown
      select {
        background: $selects-default-bg;
        border-radius: $selects-corner-radius;
        color: $selects-default-text-color;
        height: $selects-sizes-default-height;
        box-shadow: $selects-default-border;

        &::placeholder {
          color: $selects-placeholder-text-color;
        }

        &:active,
        &:focus {
          box-shadow: $selects-focus-border;
        }

        &[disabled] {
          background: $selects-disabled-bg;
          color: $selects-disabled-text-color;
          box-shadow: $selects-disabled-border;
        }
      }
      &.is-active>select {
        box-shadow: $selects-focus-border;
      }
      &.is-error>select {
        box-shadow: $selects-error-border;
      }
      &.is-medium>select {
        height: $selects-sizes-md-height;
      }
      &.is-small>select {
        height: $selects-sizes-sm-height;
      }
    }
}