@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.select {
  position: relative;
  transition: all .3s ease;

  // Pop-out box when opened
  &.is-open {    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin-bottom: $baseUnit * 6 !important;

    &::before {
      content: "";
      position: absolute;
      top: -($baseUnit * 2);
      left: -($baseUnit * 3);
      right: -($baseUnit * 3);
      bottom: -($baseUnit * 3);
      background: #fff;
      border: 1px solid #C6C6C6;  
      animation: popout .2s forwards;
    }

    &.error::before {
      border: 1px solid $red;  
    }
  }

  // Skjul label om det ikke er valgt noe, eller selecten er åpen
  &.not-selected > .label,
  &.is-open > .label {
    display: none;
  }

  & > .label {
    position: absolute;
    width: 100%;
    top: -$baseUnit;
    left: 0;
    font-size: 14px;
    font-weight: bold;
    color: rgba(#1D1C28, 0.4);
    margin-bottom: $baseUnit;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
  }

  // Forkle knappen som et input-felt
  & > button {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    border: 0;
    outline: 0;
    padding: 0;
    font: inherit;
    box-shadow: none;
    background: none;
    user-select: none;
    line-height: 24px;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
    padding-top: $baseUnit * 2;

    &[disabled] {
      @include disabled();
    }

    // Gjør så teksten i knappen ikke går inni ikonet
    & > span.icon {
      margin-left: $baseUnit * 2;
    }
  }
  
  &.is-closed.not-selected > button {
    color: rgba(#1D1C28, 0.58);
    font-style: italic;
  }

  // Legg til understrek på knappen når selecten er lukket
  &.is-closed > button {
    padding-top: $baseUnit * 2;
    padding-bottom: 14px;
    border-bottom: 1px solid #979797;

    &:focus {
      box-shadow: 0 4px 0 0 $lightBlue;
    }
  }
  
  &.is-open > button:focus-visible > span {
    outline: 4px solid $lightBlue;
    outline-offset: $baseUnit;
  }

  & > fieldset {
    position: relative;
    z-index: 2;
    border: 0;
    padding: $baseUnit 0 0 $baseUnit;
    margin: ($baseUnit * 2) 0 0 (-$baseUnit);

    max-height: unquote("min(65vh, 420px)");
    overflow-x: auto;

    & > * {
      margin-bottom: $baseUnit * 1;  
      display: block;
      list-style: none;
    }
  }
  
  // Skjul elementene når selecten er lukket
  &.is-closed > fieldset {
    overflow: hidden;
    display: none;
  }

  &.is-closed.error > button {
    border-bottom: 1px solid $red;

    & > div:first-child {
      color: $red;
    }
  }

  // Error text
  .error-message {
    position: inherit;
    display: inline-block;
    color: $red;
    font-size: 14px;
    font-weight: bold;
  }

  &.is-open > .error-message {
    margin-top: $baseUnit * 2;
  }

  &.is-closed > .error-message {
    margin-top: $baseUnit;
  }
}

@keyframes popout {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0 20px 13px 0 rgba(0, 0, 0, .05);
  }
}

.required-input::before {
  position: absolute;
  margin: 15px 0px 0px -10px; 
  @include required();
}