.fv-select {
    z-index: 10002;
    position: fixed;
    height: 500px;
    max-height: 90%;
    width: auto;
    max-width: 60%;
    min-width: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    background: var(--bg-color);
    overflow: hidden;
    box-shadow: 0 5px 15px var(--shadow-color);
    @media (--only-xs){
      height: 100%;
      max-height: 100%;
      width: 100%;
      max-width: 100%;
    }
    & .fv-option {
      position: relative;
      display: block;
      overflow: hidden;
      padding: var(--padding-small) var(--padding);
      cursor: pointer;
      &:last-child{
        border-bottom: none;
      }
      &:active,
      &.fv-focused{
        background: var(--shadow-color-light);
      }
      &.fv-disabled{
        color: var(--shadow-color);
        cursor: not-allowed;
      },
      &.fv-selected{
        background: var(--theme-color);
        color: yiq;
        &:active,
        &.fv-focused{
          background: var(--theme-color-dark);
        }
      }
    }
}

.fv-select-enter-active, .fv-select-leave-active{
  transition: opacity .25s;
  opacity: 1;
}

.fv-select-enter, .fv-select-leave-active {
  opacity: 0;
}