@use "colors" as c;
@use "utils" as util;
@use "animation";

@mixin main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  gap: 10px;

  width: auto;
  min-height: 100%;
  box-sizing: border-box;

  h1 {
    align-self: center;
    text-align: center;
    font-size: xx-large;
  }

  h2 {
    align-self: center;
    text-align: center;
    font-size: x-large;
    text-decoration: underline;
    text-wrap: balance;
  }

  h3 {
    align-self: center;
  }
}

@mixin plain {
  background-color: c.$lighter;
  border: c.$dark double 3px;
  padding: 10px;
}

@mixin sections {
  margin-block-start: 10px;

  .section {
    display: flex;
    flex-direction: column;
    align-self: center;

    box-sizing: border-box;
    width: 95vw;

    background-color: c.$lighter;
    @include util.border-first-last(10px);

    // Grid Sizes
    .grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      column-gap: 20px;
      box-sizing: border-box;

      margin: 0px;
      padding: 0px;

      list-style-type: none;

      .element {
        width: 90%;
        box-sizing: border-box;
        padding: 0rem 0;
        margin: 0.5rem 0;
        position: relative;

        text-align: center;

        border: c.$text groove 2px;
        background-color: c.$light;
        @include util.border-first-last(10px);

        p {
          padding: 0 0.5rem;
          flex-grow: 1;

          &.explanation {
            margin-top: 3px;
          }
        }

        h3.with-explanation {
          font-size: x-large;
          margin-bottom: 0;
        }
      }

      >.hover {
        transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);

        &:hover {
          transform: translateX(15px);
        }
      }
    }

    .grid2x2 {
      @media screen and (min-width:768px) {
        >.element {
          width: 45%;
          @include util.border-2x2(10px);
        }

        >.hover {
          &:hover {
            transform: translateY(-15px);
          }
        }
      }
    }

    // Extra Grid Types
    .grid-img {
      >.element {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        div.block {
          flex-grow: 2;
          display: block;

          >h3 {
            text-align: center;
            text-wrap: balance;
            font-size: x-large;
          }
        }

        img {
          margin-left: 1vw;
          width: 50px;
          // aspect-ratio: 1/1;
        }
      }
    }

    .grid-plain {
      >.element {
        width: 80%;
        border: none;
        background-color: inherit;
        list-style-type: disc;
        text-align: justify;
        text-align-last: left;
        line-break: loose;
      }
    }

    .grid-linear {
      column-gap: 5px;

      .hover {
        &:hover {
          transform: translateY(-15px);
        }
      }

      @media screen and (min-width:1367px) {
        justify-content: space-between;

        >.element {
          width: 24%;
          @include util.border-linear(10px);

          .hover {
            &:hover {
              transform: translateX(15px);
            }
          }
        }
      }
    }

    .grid-big {
      .element {
        width: 48%;
        min-height: 40vh;
      }

      @media screen and (max-width:1366px) {
    
        >.element {
          width: 90%;
          min-height: auto;
          @include util.border-first-last(10px);

          .hover {
            &:hover {
              transform: translateX(15px);
            }
          }
        }
      }
    }

    // Extra Section Elements
    >.note {
      >.symbol {
        display: inline-block;
        animation: shake-x 4.72s ease infinite;
        transform-origin: 50% 50%;
      }

      font-style: italic;
      text-align: center;
      margin: 1vh 1vw;
    }
  }
}