---
import Title from './title.astro'
import Colors from './colors.astro';
import Font from './font.astro';
import Border from './border.astro';
import Spacings from './space.astro'
---

<div class="slides">
  <Title />
  <Colors />
  <Font />
  <Border />
  <Spacings />
</div>

<style lang="scss" is:global>
@font-face {
  font-family: 'Kablammo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Kablammo.ttf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.three-grid {
  display: grid;
  gap: 1rem;
  grid-template: "start-start block-start start-end" 1fr
                 "inline-start center inline-end" 100px
                 "end-start block-end end-end" 1fr /1fr 1fr 1fr;
  font-family: monospace;

  .block-start {
    grid-area: block-start;
    border-block-end: 4px solid black;
  }
  .inline-start {
    grid-area: inline-start;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-inline-end: 4px solid black;
  }
  .center {
    grid-area: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .inline-end {
    grid-area: inline-end;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-inline-start: 4px solid black;
  }
  .block-end {
    grid-area: block-end;
    border-block-start: 4px solid black;
  }

  .start-start {
    grid-area: start-start;
  }
  .start-end {
    grid-area: start-end;
  }
  .end-start {
    grid-area: end-start;
  }
  .end-end {
    grid-area: end-end;
  }
}

.apply-styles {
  &.one {
    &.helvetica {
      font-family: "American Typewriter";
    }
    .font-large {
      font-size: 8rem;
    }

    .font-bold {
      font-weight: 900;
    }

    .font-thin {
      font-weight: 100;
    }

    .letter-spacing {
      letter-spacing: 8px;
    }

    .line-height {
      line-height: 20px;
    }

    .word-spacing-1 {
      word-spacing: 1rem;
    }
    .word-spacing-2 {
      word-spacing: 2rem;
    }
    .word-spacing-3 {
      word-spacing: 3rem;
    }
    
    .underline {
      text-decoration: underline;
    }
    .overline {
      text-decoration: overline;
    }
    .strike-through {
      text-decoration: line-through;
    }

    .all-decorations {
      text-decoration: underline overline line-through solid;
    }

    .double {
      text-decoration-style: double;
    }
    .dotted {
      text-decoration-style: dotted;
    }
    .dashed {
      text-decoration-style: dashed;
    }
    .wavy {
      text-decoration-style: wavy;
    }

    .thick-line {
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-thickness: 1rem;
    }

    .decorate {
      text-decoration: underline wavy 3px blue;
    }

    .start {
      text-align: start;
    }
    .end {
      text-align: end;
    }
    .center {
      text-align: center;
    }
    .justify {
      text-align: justify;
    }

    .italic {
      font-style: italic;
    }

    .bloody {
      text-shadow: 5px 5px 10px red;
    }

    .noteworthy-and-other {
      font-family: Noteworthy, Source Sans Pro, -apple-system, sans-serif, monospace;
    }

    .kablammo {
      font-size: 6rem;
      font-family: Kablammo;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-variation-settings:"MORF" 2;
      
      &:hover {
        animation: MORF 5s infinite;
      }
    }

    @keyframes MORF {
      0% {
        font-variation-settings: "MORF" 0;
      }
      50% {
        font-variation-settings: "MORF" 60;
      }
      100% {
        font-variation-settings: "MORF" 0;
      }
    }
  }

  &.two {
    .base-border-wo-style {
      border-color: darkslategrey;
      border-width: 2rem;
    }

    .border-double {
      border-style: double;
    }

    .border-dashed {
      border-style: dashed;
    }

    .border-dotted {
      border-style: dotted;
    }

    .border-inset {
      border-style: inset;
    }

    .border-outset {
      border-style: outset;
    }

    .with-border {
      border: 5px solid black;
    }

    .border-single-def {
      border-color: crimson;
      border-width: 2rem;
      border-style: ridge;
    }

    .seperated-border-style {
      border-block-start: 0.5rem double blueviolet;
      border-inline-end: 0.5rem dashed olivedrab;
    }

    .rounded-corners {
      border: 3px solid darkblue;
      border-radius: 1rem;
    }

    .fifty-percent-corners {
      border: 3px solid darkblue;
      border-radius: 50%;
    }

    .cornered-corners {
      border: 3px solid darkblue;
      border-radius: 0 0.5rem 1rem 2rem;
    }

    .animated-border-radius {
      animation: border-radius 5s linear infinite;
    }
    @keyframes border-radius {
      0% { border-radius: 2.5rem 0 0 0;}
      25% { border-radius: 0 2.5rem 0 0;}
      50% { border-radius: 0 0 0 2.5rem;}
      75% { border-radius: 0 0 2.5rem 0;}
      100% { border-radius: 2.5rem 0 0 0;}
    }
  }

  &.three {
    .box {
      display: inline-block;
      border: 4px solid black;

      &.pad {
        padding: 1rem;
      }

      &.margin {
        margin: 1rem;
      }
    }
  }
  
  &.four {
    span.label {
      position: absolute;
      top: 1rem;
      left: 1rem;
    }
    .flex-center {
      display: inline-flex;
      position: relative;
      padding: 5rem;
    }
    .margin {
      background-color: greenyellow;
    }
    .border {
      background-color: orange;
    }
    .padding {
      background-color: lightseagreen;
    }
    .content {
      display: inline;
      padding: 2rem;
      background-color: black;
      color: white;
    }
  }
}
</style>