@import "../../pfe-sass/pfe-sass";

$LOCAL: select;

$LOCAL-VARIABLES: (
  BackgroundColor:  pfe-var(surface--lightest),
  Color:            pfe-var(text),
  
  // Border styles
  BorderBottomColor:          pfe-var(surface--darker),
  BorderBottomColor--hover:   pfe-var(link),
  BorderBottomColor--error:   pfe-var(feedback--critical),
  BorderColor:                pfe-var(surface--lighter),
  BorderWidth:                pfe-var(ui--border-width),
  BorderBottomWidth:          pfe-var(ui--border-width),
  FontFamily:                 pfe-var(font-family)
);

// Nested internal variables (pfe-local calls), maps cannot "self-reference"
$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
  BorderTop:            pfe-local(BorderWidth) pfe-var(ui--border-style) pfe-local(BorderColor),
  BorderLeft:           pfe-local(BorderWidth) pfe-var(ui--border-style) pfe-local(BorderColor),
  BorderRight:          pfe-local(BorderWidth) pfe-var(ui--border-style) pfe-local(BorderColor),
  BorderBottom:         pfe-local(BorderBottomWidth) pfe-var(ui--border-style) pfe-local(BorderBottomColor),
  BorderBottom--hover:  pfe-local(BorderBottomWidth) pfe-var(ui--border-style) pfe-local(BorderBottomColor--hover),
));

:host {  
  @include pfe-box-sizing;

  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 1.5em;
  font-weight: 400;
  text-align: left;
  text-rendering: optimizelegibility;
  border-top:       pfe-local(BorderTop);
  border-right:     pfe-local(BorderRight);
  border-bottom:    pfe-local(BorderBottom);
  border-left:      pfe-local(BorderLeft);
  background-color: pfe-local(BackgroundColor);
  color:            pfe-local(Color);

  &::after {
    @include pfe-arrow(
      $type: down,
      $color: $pf-color-black-800,
      $width: 6px,
      $height: 6px,
      $pseudo: true) {
        position: absolute;
        top: calc(#{pfe-var(container-padding)} * 0.875);
        right: calc(#{pfe-var(container-padding)} * 0.75);
    }
  }

  @at-root #{&}([hidden]) {
    display: none;
  }

  @at-root #{&}(:hover) {
    border-bottom: pfe-local(BorderBottom--hover);
  }

  @at-root #{&}(:focus-within) {
      border-bottom-width: calc(#{pfe-var(surface--border-width--heavy)} / 2);
      border-bottom-color: pfe-local(BorderBottomColor--hover);
      ::slotted(select) {
          padding-bottom: calc(var(--pfe-theme-container-padding, 1rem) * 0.438); // ~7px
      }
  }

  ::slotted(select) {
    // text-rendering: auto !important is necessary because of a Safari bug
    // https://bugs.webkit.org/show_bug.cgi?id=202198
    text-rendering: auto !important;
    background-color: pfe-local(BackgroundColor);
    color:            pfe-local(Color);

    border-radius: 0;
    width: 100%;
    min-width: 100%;

    font-size:    pfe-var(font-size);
    font-weight:  pfe-var(font-weight--normal);
    font-family: pfe-local(FontFamily);

    appearance: none;
    box-shadow: none;
    border:     none;
    padding:        calc(#{pfe-var(container-padding)} * 0.5); // ~8px
    padding-right:  calc(#{pfe-var(container-padding)} * 1.5);
  }

  // @TODO: Deprecated pfe-invalid in 1.0
  @at-root #{&}([invalid]) {
    border-bottom-width: calc(#{pfe-var(surface--border-width--heavy)} / 2);
    border-bottom-color: pfe-local(BorderBottomColor--error);

    // @TODO update this to use pfe-icon instead of hardcoding the icon in the CSS?
    ::slotted(select) {
      padding-bottom:   calc(#{pfe-var(container-padding)} * 0.438); // ~7px
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
      background-size: .875rem;
      background-repeat: no-repeat;
      background-position: calc(100% - calc(#{pfe-var(container-padding)} * 2)) center;
    }
  }

  @at-root #{&}([invalid]) {
    border-bottom-width: calc(#{pfe-var(surface--border-width--heavy)} / 2);
    border-bottom-color: pfe-local(BorderBottomColor--error);

    // @TODO update this to use pfe-icon instead of hardcoding the icon in the CSS?
    ::slotted(select) {
      padding-bottom:   calc(#{pfe-var(container-padding)} * 0.438); // ~7px
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
      background-size: .875rem;
      background-repeat: no-repeat;
      background-position: calc(100% - calc(#{pfe-var(container-padding)} * 2)) center;
    }
  }
}