@import '../../sass/base/index';

.dfo-select {
  font-size: 1.8rem;
  margin-bottom: $padding-small;
  font-weight: 600;
  color: $primary;
  display: block;

  + * {
    margin-top: $padding-medium;
  }

  + .dfo-expand {
    margin-top: $padding-small;
  }

  select {
    padding: 1.8rem 2.6rem;
    outline: 0;
    margin: $padding-small 0;
    border: 2px solid $primaryLight;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;

    // url-encoded version of ./select.svg 👇
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.7mm' height='2.723mm' viewBox='0 0 13.322 7.719'%3E%3Ctitle%3Edown_arrow%3C/title%3E%3Cpath d='M0,1.057L1.048,0,6.661,5.612,12.274,0l1.048,1.057L6.661,7.719Z' style='fill:%230f2b4c'/%3E%3C/svg%3E") no-repeat calc(100% - 2.6rem) center;

    &:hover,
    &:focus {
      box-shadow: inset 0 0 0 1px $primaryLight;
    }

    &.dfo-select__placeholder {
      color: $grayPlaceholder;
    }
  }

  option:not(:first-of-type) {
    color: $text;
  }

  .dfo-error-wrapper {
    position: relative;

    &:before {
      width: 2px;
      content: "";
      background-color: transparent;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -18px;
    }
  }

  &--is-error {
    margin-bottom: $padding-medium;

    .dfo-error-wrapper::before {
      background-color: $error;
    }

    .dfo-error-wrapper__error {
      padding-left: $padding-small;
      font-weight: normal;
      font-style: italic;
    }
  }
}