@import '../../styles/variables';

:host /deep/ {
  .dk-select {
    max-width: 100%;
    font-family: $headers-font, $headers-font-family;
    font-size: .929em;
    min-width: 100px;
    width: auto;
  }

  .dk-selected:after {
    display: none;
  }

  // button
  .dk-selected {
    color: $secondary-color;
    border-color: rgba($secondary-color, .5);
    padding: 0.15em 1.5em 0.2em 0.5em;
    border-radius: $border-radius;
  }

  .dk-select-open-down .dk-selected, .dk-selected:focus, .dk-selected:hover {
    border-color: $primary-color;
    color: $primary-color;
  }

  // tick
  .dk-selected:before {
    border-top-color: $secondary-color;
    border-width: .35em .35em 0;
  }

  .dk-select-open-down .dk-selected:before,
  .dk-select-open-up .dk-selected:before {
    border-bottom-color: $primary-color;
  }

  // items
  .dk-select-multi:focus .dk-select-options,
  .dk-select-open-down .dk-select-options,
  .dk-select-open-up .dk-select-options {
    border-color: rgba($secondary-color, .2);
  }

  .dk-select-options .dk-option-highlight {
      background: #ffffff;
  }

  .dk-select-options {
    margin-top: 0.2em;
    padding: 0;
    border-radius: $border-radius;
    box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08) !important;
    right: auto;
    min-width: 100%;
  }

  .dk-option {
    color: $secondary-color;
    padding: 0.16em 0.6em 0.2em 0.5em;
    &:hover {
      background-color: rgba($secondary-color, .12);
    }
    &:focus {
      background-color: rgba($secondary-color, .12);
    }
  }

  .dk-option-selected {
    background-color: rgba(0, 0, 0, 0.05)!important;
  }
}