@keyframes select-loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.c-select {
  $self: #{&};
  $selected: #{$self}__selected;
  $field: #{$self}__field;
  $toggle: #{$self}__toggle;

  $list: #{$self}__list;
  $list-info: #{$self}__list-info;
  $list-options: #{$self}__list-options;

  $option: #{$self}__option;

  $toggle-font-size: 1.375rem;
  $option-padding: .375rem .75rem;
  $option-font-color: $g-font-color;
  $option-hover-background-color: rgba($color-primary, 0.8);
  $option-selected-background-color: rgba(#000, 0.1);
  $option-delete-background-color: rgba($color-error, 0.8);
  $option-group-background-color: rgba(#000, 0.15);

  @at-root {

    #{$self} {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
      height: auto;
      padding-right: calc(#{nth($form-input-padding, 2)*2} + #{$toggle-font-size});
    }

    #{$selected} {
      margin: 0 5px 5px 0;
      background-color: $option-hover-background-color;
      color: #fff;
      font-size: 0.9em;
      cursor: pointer;

      &:hover {
        background-color: $option-delete-background-color;
        color: #fff;
      }
    }

    #{$field} {
      flex: 1 1 auto;
      display: block;
      max-width: 100%;
      height: 100%;
      border: none;
      background: none;
      margin: 0;
    }

    #{$toggle} {
      position: absolute;
      z-index: 2;
      top: nth($form-input-padding, 1);
      right: nth($form-input-padding, 2);
      font-size: $toggle-font-size;
      cursor: pointer;
    }

    #{$list} {
      z-index: 3;
      display: block;
      width: 100%;
      height: auto;
      background: #fff;
      box-shadow: 0 5px 10px 0 rgba(#000, 0.3);
    }

    #{$list-info} {
      display: block;
      width: 100%;
      padding: $option-padding;
    }

    #{$list-options} {
      display: block;
      width: 100%;
      height: auto;
      max-height: 300px;
      overflow-x: hidden;
      overflow-y: auto;
    }

    #{$option} {
      display: block;
      width: 100%;
      padding: $option-padding;
      cursor: pointer;

      &:hover,
      &:focus {
        background-color: $option-hover-background-color;
        color: #fff;
      }

      &.is-selected {
        font-weight: 600;
        background-color: $option-selected-background-color;
        color: $option-font-color;

        &:hover,
        &:focus {
          background-color: $option-delete-background-color;
          color: #fff;
        }
      }

      &.is-group {
        background: $option-group-background-color;
        color: $option-font-color;
      }

      &.is-focused {
        outline: 1px solid $option-hover-background-color;
      }
    }

  }

  // Transition
  &-enter-active,
  &-leave-active {
    transition: opacity 0.2s ease;
  }

  &-enter,
  &-leave-active {
    opacity: 0;
  }

  &-spin {
    animation: 0.5s linear infinite select-loading-spin;
  }

}