@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/breakpoints' as breakpoints;

.select-wrapper {
  display: flex;
  flex-direction: column;
}

.select-inner-wrapper {
  // Grid brukes til å kunne plassere custom ikon fritt over select elementet
  display: inline-grid;
  background-color: palette.$white;
  align-items: center;

  // Andre kolonne her styrer plassering av select ikonet
  grid-template-columns: 1fr 2.8rem;

  &--transparent {
    background-color: transparent;
  }

  &:hover {
    background: palette.$neutral50;
  }

  &--on-blueberry {
    &:hover {
      background-color: palette.$blueberry50;
    }
  }

  &--invalid {
    &:hover {
      background-color: palette.$cherry50;
    }
  }

  &--disabled {
    color: palette.$neutral700;
    background: transparent;

    &:hover {
      background: transparent;
    }
  }
}

.select {
  /* Pil fjernes for browsere utenom IE */
  appearance: none;
  height: calc(2.75rem + 0.25rem); // 44px height + 4px border
  align-items: center;
  background-color: transparent;
  grid-column: 1 / 3;
  grid-row: 1;
  padding-left: spacers.getSpacer(xs);
  padding-right: 2.5rem;
  border: none;
  outline: palette.$neutral700 solid 2px;
  outline-offset: -2px;
  font-family: inherit;
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;
  border-radius: 0;
  text-overflow: ellipsis;
  cursor: pointer;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    height: calc(3rem + 0.25rem); // 48px height + 4px border
    font-size: font-settings.$font-size-md;
  }

  &--on-blueberry {
    outline-color: palette.$blueberry500;
  }

  &--invalid {
    outline-color: palette.$cherry600;
  }

  :hover > & {
    outline-width: 3px;
    outline-offset: -1px;
  }

  &:focus {
    outline: palette.$black solid 4px;
    outline-offset: -2px;
  }

  &:disabled {
    outline: palette.$neutral600 dashed 2px;
    outline-offset: -2px;
  }

  & > option {
    background: palette.$white;
    font-family: inherit;
    font-size: font-settings.$font-size-sm;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      font-size: font-settings.$font-size-md;
    }
  }
}

.select-arrow {
  grid-column: 2;
  grid-row: 1;
}