/*
Component represents a heading and subheadings.
Use:
  <h1 class="top-heading size-lg">
    <span class="style-secondary style-round">обучение</span>
    <span class="style-secondary style-rectangle">в академии</span>
  </h1>
*/
@use '../mixins/styles.scss';
@use '../mixins/flex.scss';

.top-heading {
  @include flex.column;

  > span {
    width: max-content;
    display: block;

    padding: var(--unit-2) var(--unit-6);

    font-size: var(--text-size);
    font-family: var(--font-heading);
    font-weight: 400;

    // Shapes
    &.style-shape-round {
      border-radius: var(--radius-4);
    }
    &.style-shape-rectangle {
      border-radius: 0;

      // Decor
      &.style-background-1 {
        padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-3);

        clip-path: polygon(
          0 var(--pixel-width),
          var(--pixel-width) var(--pixel-width),
          var(--pixel-width) 0,
          100% 0,

          100% 100%, 0 100%
        );
      }
      &.style-background-2 {
        padding: var(--spacing-2) calc(32px + var(--pixel-width)) var(--spacing-1) calc(var(--spacing-3) + var(--pixel-width));

        clip-path: polygon(
          0 0,

          calc(100% - var(--pixel-width)) 0,
          calc(100% - var(--pixel-width)) var(--pixel-width),
          100% var(--pixel-width),

          100% 100%,
          var(--pixel-width) 100%,
          var(--pixel-width) calc(100% - var(--pixel-width)),
          0 calc(100% - var(--pixel-width))
        );
      }
      &.style-background-3 {
        padding: var(--spacing-1) 32px var(--spacing-2) calc(var(--spacing-3) + var(--pixel-width));

        clip-path: polygon(
          0 0,
          100% 0,

          100% 100%,
          var(--pixel-width) 100%,
          var(--pixel-width) calc(100% - var(--pixel-width)),
          0 calc(100% - var(--pixel-width))
        );
      }
      &.style-background-4 {
        padding: var(--spacing-1) calc(var(--spacing-1) + var(--pixel-width)) var(--spacing-2) var(--spacing-3);

        clip-path: polygon(
          0 0,
          100% 0,

          100% calc(100% - var(--pixel-width)),
          calc(100% - var(--pixel-width)) calc(100% - var(--pixel-width)),
          calc(100% - var(--pixel-width)) 100%,
          0 100%
        );
      }
      &.style-background-5 {
        padding: var(--spacing-2) calc(var(--spacing-3) + var(--pixel-width)) var(--spacing-1) calc(var(--spacing-2) + var(--pixel-width));

        clip-path: polygon(
          0 var(--pixel-width),
          var(--pixel-width) var(--pixel-width),
          var(--pixel-width) 0,
          100% 0,
          
          100% calc(100% - var(--pixel-width)),
          calc(100% - var(--pixel-width)) calc(100% - var(--pixel-width)),
          calc(100% - var(--pixel-width)) 100%,

          0 100%
        );
      }
    }

    // Text position
    &.style-text-top-left {
      padding: var(--spacing-1) var(--spacing-4) var(--spacing-2) var(--spacing-3);
    }
    &.style-text-top-right {
      padding: var(--spacing-1) var(--spacing-3) var(--spacing-2) var(--spacing-4);
    }
    &.style-text-top-center {
      padding: var(--spacing-1) var(--spacing-4) var(--spacing-2) var(--spacing-4);
    }
    &.style-text-bottom-left {
      padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-3);
    }
    &.style-text-bottom-right {
      padding: var(--spacing-2) var(--spacing-3) var(--spacing-1) var(--spacing-4);
    }
    &.style-text-bottom-center {
      padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);
    }

    // Position
    &.style-position-start {
      align-self: flex-start;
    }
    &.style-position-center {
      align-self: center;
    }
    &.style-position-end {
      align-self: flex-end;
    }
  }

  &.size-lg {
    --text-size: 56px;

    --pixel-width: var(--unit-6);

    --spacing-1: var(--unit-2);
    --spacing-2: var(--unit-4);
    --spacing-3: var(--unit-6);
    --spacing-4: var(--unit-9);
  }
  &.size-md {
    --text-size: var(--font-size-8);

    --pixel-width: var(--unit-4);

    --spacing-1: var(--unit-2);
    --spacing-2: var(--unit-3);
    --spacing-3: var(--unit-4);
    --spacing-4: var(--unit-7);
  }
  &.size-sm {
    --text-size: var(--font-size-7);

    --pixel-width: var(--unit-3);
    
    --spacing-1: var(--unit-1);
    --spacing-2: var(--unit-2);
    --spacing-3: var(--unit-4);
    --spacing-4: var(--unit-6);
  }
  &.size-xs {
    --text-size: var(--font-size-5);

    > span {
      padding: var(--unit-1) var(--unit-2);
    }
  }
}