@use '../core/functions';
@use '../core/mediaqueries';
@use './typo';

// ----------------------------------------------------------------------------------------------------
// Panel Mixins: Achieve the styling of a panel
// ----------------------------------------------------------------------------------------------------

@mixin panel-variables {
  --sbb-panel-width: #{functions.px-to-rem-build(223)};
  --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
  --sbb-panel-triangle-height: #{functions.px-to-rem-build(33)};
  --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
  --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
  --sbb-panel-color: var(--sbb-color-white);
  --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
  --sbb-panel-background-color-hover: var(--sbb-color-red);
  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
  --sbb-panel-animation-duration: var(
    --sbb-disable-animation-time,
    var(--sbb-animation-duration-4x)
  );
  --sbb-panel-animation-easing: var(--sbb-animation-easing);

  @include mediaqueries.mq($from: medium) {
    --sbb-panel-width: #{functions.px-to-rem-build(321)};
    --sbb-panel-inner-height: #{functions.px-to-rem-build(240.11)};
    --sbb-panel-triangle-height: #{functions.px-to-rem-build(47.45)};
    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
  }

  @include mediaqueries.mq($from: large) {
    --sbb-panel-width: #{functions.px-to-rem-build(428)};
    --sbb-panel-inner-height: #{functions.px-to-rem-build(320.38)};
    --sbb-panel-triangle-height: #{functions.px-to-rem-build(63.31)};
    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
    --sbb-panel-line-height: 1.2;
  }
}

@mixin panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sbb-panel-gap);
  width: var(--sbb-panel-width);
  height: var(--sbb-panel-height);
  padding-block: var(--sbb-panel-triangle-height);
  padding-inline: var(--sbb-panel-padding-inline);
  clip-path: polygon(
    0 0,
    100% var(--sbb-panel-triangle-height),
    100% calc(100% - var(--sbb-panel-triangle-height)),
    0% 100%
  );
  background-color: var(--sbb-panel-background-color);
  transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);

  @include mediaqueries.hover-mq($hover: true) {
    &:hover {
      --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
    }
  }
}

@mixin panel-text {
  @include typo.font-smoothing;

  font-family: var(--sbb-typo-font-family);
  font-size: var(--sbb-panel-font-size);
  font-weight: 300;
  line-height: var(--sbb-panel-line-height);
  letter-spacing: var(--sbb-typo-letter-spacing-titles);
  color: var(--sbb-panel-color);
}