/** FANCY SELECT BOX ***/

.fancy-select-boxes {

  &.select-box-container {
    position: relative;
    display: inline-block;
  }

  .select-box-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: $ff-color-selectbox-bg;
  }

  .chevron {
    width: 0.5em;
    height: 0.5em;
    position: absolute;
    top: 35%;
    right: 1em;
    border-top: 0.2em solid $ff-color-selectbox-chevron;
    border-right: 0.2em solid $ff-color-selectbox-chevron;
    z-index: 2;
    transform-origin: center;
    transform: rotate(135deg);
  }

  select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    outline: none;
    padding: 0.5em 2em 0.5em 0.5em;
    font: inherit;
    color: inherit;
    border: 2px solid $ff-color-selectbox-border;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    z-index: 3;
    cursor: pointer;
    
    @keyframes animate-chevron {
      0% { transform: translateY(0px) rotate(135deg) ; }
      50% { transform: translateY(2px) rotate(135deg) ; }
      100% { transform: translateY(0px) rotate(135deg) ; }
    }
    
    /*** STATES ***/
    
    //FOCUS
    &:focus {
      @include focus-box-shadow($ff-color-selectbox-focused);
    }  
    &:focus ~ .chevron {
      border-color: $ff-color-selectbox-focused;
    }
    &.incorrect:focus {
      @include focus-box-shadow($ff-color-selectbox-answer-incorrect);
    }
    &.incorrect:focus ~ .chevron {
      border-color: $ff-color-selectbox-answer-incorrect;
    }
    &.correct:focus {
      @include focus-box-shadow($ff-color-selectbox-answer-correct);
    }
    &.correct:focus ~ .chevron {
      border-color: $ff-color-selectbox-answer-correct;
    }
    
    
    //SELECTED
    &.incorrect option:checked {
      color: $ff-color-selectbox-answer-incorrect;
    }
    
    //HOVER
    &:not(:disabled):hover {
      @include border-2($ff-color-selectbox-hover);
    }
    &:not(:disabled):hover ~ .chevron {
      border-color: $ff-color-selectbox-hover;
      animation: animate-chevron 0.5s forwards;
      animation-timing-function: cubic-bezier(0, .69, .67, 1.5);
    }
    
    &.correct:not(:disabled):hover {
      @include border-2($ff-color-selectbox-answer-correct);
    }
    &.correct:not(:disabled):hover ~ .chevron {
      border-color: $ff-color-selectbox-answer-correct;
    }

    &.incorrect:not(:disabled):hover {
      @include accessibility-border-bottom($ff-color-selectbox-answer-incorrect);
    }
    &.incorrect:not(:disabled):hover ~ .chevron {
      border-color: $ff-color-selectbox-answer-incorrect;
    }
  
    
    //DISABLED
    &:disabled,
    &:disabled ~ .chevron {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    &.correct:disabled,
    &.incorrect:disabled,
    &.correct:disabled ~ .chevron,
    &.incorrect:disabled ~ .chevron {
      opacity: 1;
      cursor: not-allowed;
    }
    
    &.incorrect {
      @include border-2($ff-color-selectbox-answer-incorrect);
      @include accessibility-border-bottom($ff-color-selectbox-answer-incorrect);
    }
    &.incorrect ~ .chevron {
      border-color: $ff-color-selectbox-answer-incorrect;
    }
    &.correct {
      @include border-2($ff-color-selectbox-answer-correct);
    }
    &.correct ~ .chevron {
      border-color: $ff-color-selectbox-answer-correct;
    }
    
  }
  
  
}

/*** /FANCY SELECT BOX **/