@use 'sass:map';
@use '../../../scss/spacers' as spacers;
@use '../../../scss/palette' as palette;
@use '../../../scss/breakpoints' as breakpoints;
@import '../../../scss/supernova/styles/colors';

.tab-panel {
  $tab-panel: &;
  $colors: 'blueberry', 'neutral', 'white';

  padding: spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(xl);
  width: 100%;
  border-bottom: 1px solid var(--color-action-border-onlight-focus);

  @each $color in $colors {
    &#{$tab-panel}--#{$color} {
      background-color: var(--color-base-background-#{$color});
    }
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    border-radius: 0 0 0.5rem 0.5rem;
    border: 1px solid var(--color-action-border-onlight-focus);
    border-top: 0;
    padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xl);

    &#{$tab-panel}--first {
      border-radius: 0;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        border-radius: 0 0 0.5rem 0.5rem;
      }
    }
  }
}