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

$colors: 'neutral', 'blueberry', 'cherry';

.promopanel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding-left: spacers.getSpacer(s);
  padding-right: spacers.getSpacer(2xs);
  transition: background-color 0.15s ease-in-out;

  &:focus-within {
    box-shadow:
      0 0 0 2px palette.$black,
      inset 0 0 0 2px palette.$black;
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
    padding-left: 0;
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
    padding-right: spacers.getSpacer(s);
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    padding-right: spacers.getSpacer(l);
  }

  &--no-illustration {
    padding-left: spacers.getSpacer(s);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding-left: spacers.getSpacer(l);
    }
  }

  @each $color in $colors {
    &--#{$color} {
      background-color: map.get(palette.$palette-map, #{$color}50);

      &:hover {
        background-color: map.get(palette.$palette-map, #{$color}100);
      }
    }
  }

  &__illustration {
    display: none;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
      display: inline;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: spacers.getSpacer(3xs);
    padding-top: spacers.getSpacer(m);
    padding-bottom: spacers.getSpacer(m);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      gap: spacers.getSpacer(2xs);
      padding-top: spacers.getSpacer(l);
      padding-bottom: spacers.getSpacer(l);
    }

    a,
    button {
      all: unset;
      cursor: pointer;

      &::after {
        inset: 0;
        content: '';
        position: absolute;
      }
    }
  }

  &__icon {
    margin-left: spacers.getSpacer(xs);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
      margin-left: spacers.getSpacer(s);
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
      margin-left: spacers.getSpacer(l);
    }
  }
}