/*
 * Section elements
 *
 */

@use '../abstracts/functions';
@use '../abstracts/mixins/breakpoints' as *;

@mixin -section($backgroundColor: none) {
  margin: 1rem 0;

  @if $backgroundColor !=none {
    padding: 0.75rem;
    background-color: $backgroundColor;

    @include bp-up(36rem) {
      padding: 1rem;
    }

    @include bp('tablet-up') {
      padding: 1.5rem;
    }
  }
}

.pkt-section {
  @include -section;
}

.pkt-section--dark {
  color: functions.color-token('text-body-light');
  @include -section(functions.color-token('surface-strong-dark-blue'));
}

.pkt-section--danger {
  color: functions.color-token('text-body-dark');
  @include -section(functions.color-token('surface-strong-red'));
}

.pkt-section--gray,
.pkt-section--grey {
  @include -section(functions.color-token('surface-default-gray'));
}

.pkt-section--success {
  color: functions.color-token('text-body-dark');
  @include -section(functions.color-token('surface-strong-green'));
}

.pkt-section--warning {
  @include -section(functions.color-token('surface-strong-yellow'));
}

.pkt-section--info {
  @include -section(functions.color-token('surface-default-light-blue'));
}

.pkt-section--frame {
  border: 1px solid functions.color-token('brand-neutrals-1000');
  @include -section(functions.color-token('surface-subtle-white'));
}

[class*='ok-section-'] > [class^='ok-title-'] {
  margin-block-start: 0;
}

.pkt-section--margin-top {
  margin-block-start: 2.5rem;
}