---
import Title from "./title.astro";
import Introduction from './introduction.astro';
import Pseudo from './pseudo.astro';
import Advanced from "./advanced.astro";
import MediaQueries from './media-queries.astro';
---

<div class="slides">
  <Title />
  <Introduction />
  <Advanced />
  <Pseudo />
  <MediaQueries />
</div>

<style is:global lang="scss">
  .reveal pre code {
    max-height: unset;
  }
  .apply-styles {
    &.pseudo {
      .container.first :first-child {
        border: 4px solid #E58F65;
      }
      .container.first :first-letter {
        color: red;
      }
      .container.second:first-line {
        color: deeppink;
      }

      .container.third p:first-of-type {
        font-weight: bold;
        color: royalblue;
      }

      .container.fourth .child:nth-child(2) {
        background-color: #E58F65;
      }
      .container.fourth :nth-child(4 of .child) {
        background-color: #E58F65;
      }

      .container.fifth {
        :nth-child(even of .child) {
          background-color: #E58F65;
        }
        :nth-child(odd of .child) {
          background-color: rgb(126, 154, 240);
        }
      }

      .container.sixth {
        .before-and-after {
          &::before {
            content: '>>before<<';
            background-color: rgb(255, 255, 172);
          }

          &::after {
            content: '>>after<<';
            background-color: rgb(255, 194, 201);
          }
        }
      }

      .container.seventh {
        .arrow-box {
          padding: 1rem;
          position: relative;
          background: #88b7d5;
          border: 4px solid #c2e1f5;
        }
        .arrow-box:after, .arrow-box:before {
          top: 100%;
          left: 50%;
          border: solid transparent;
          content: "";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
        }

        .arrow-box:after {
          border-color: rgba(136, 183, 213, 0);
          border-top-color: #88b7d5;
          border-width: 30px;
          margin-left: -30px;
        }
        .arrow-box:before {
          border-color: rgba(194, 225, 245, 0);
          border-top-color: #c2e1f5;
          border-width: 36px;
          margin-left: -36px;
        }
      }

      .container.eighth {
        button {
          padding: 1rem 2rem;
          border: none;
          outline: none;
          background-color: white;
          border: 4px solid black;
          border-radius: 1rem;
          font-size: xx-large;
          cursor: pointer;
          box-shadow: 24px 24px 0 black;
          transition: 
            box-shadow 50ms ease-in-out,
            transform 50ms ease-in-out;

        }

        button:active {
          box-shadow: 12px 12px 0 black;
          transform: translateY(4px);
        }
      }

      .container.ninth {
        display: flex;
        justify-content: center;

        .card {
          border: 4px solid black;
          max-width: 300px;
          padding: 2rem;
          border-radius: 2rem;
          box-shadow: 6px 6px 10px #0006;
          transition: box-shadow 150ms ease-in-out;
        }

        .card:hover {
          box-shadow: 24px 24px 16px #0006;
        }
      }
    }

    &.not {
      p:not(.important) {
        background-color: #282;
        color: white;
      }

      p.important {
        background-color: #822;
        color: white;
      }
    }

    &.not-where {
      ul,ol {color: darkblue;}
      ul,ol ul { color: darkred; }
      ul,ol ol { color: darkred; }
      ul,ol ul ol { color: darkgreen; }
    }

    &.where {
      :where(ol, ul) { color: darkblue; }
      :where(ol, ul) :where(ol, ul) { color: darkred; }
      :where(ol, ul) :where(ol, ul) :where(ol, ul) { color: darkgreen; }
    }

    &.where-specifity {
      p:where(.test) {
        background-color: white;
      }

      p {
        background-color: #002;
        color: white;
      }
    }

    &.is-specifity {
      p:is(.test) {
        background-color: white;
        color: black;
      }

      p {
        background-color: #002;
        color: white;
      }
    }

    &.child-selector {
      font-family: monospace;
      font-weight: bold;

      .eins .inner {
        background-color: #bfc;
      }

      .zwei .inner {
        background-color: #f99;
      }
    }

    &.child-combinator {
      font-family: monospace;
      font-weight: bold;

      .parent > .child {
        background-color: #f99;
      }
    }

    &.sibling {
      font-family: monospace;

      .first + .second {
        background-color: #f99;
      }
    }

    &.mq-first {
      @media (width <= 900px) {
        div.small-styled {
          background-color: #f99;
        }
      }
    }
  }
</style>