// https://twitter.com/ARasheedPhoto/status/1244337514233520129/photo/1

// Fonts
// - Audiowide (JVC XR)
// - Libre Franklin: 300, 600, 700 (Polaroid base font)
// - Martel Sans: 900 (Kodak logo)
// - Oswald: 300, 400, 600 (Polaroid code)
// - Quattrocento Sans: 700 (Hitachi 180)
// - Saira: 800 (Kodak HS)
// - Teko: 400, 500, 700 (JVC logo)


// Base styles
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  align-items: center;
  background-color: hsl(256, 40%, 95%);
  color: hsl(62, 4%, 12%);
  display: flex;
  font-family: "Libre Franklin", sans-serif;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}
h1, p {
  flex: 1 0 100%;  
  text-align: center;
}
h1 {
  margin-bottom: 0.2em;
}
p {
  margin-top: 0;
  opacity: 0.76;
  >a {
    color: inherit;
    &:hover, &:focus {
      color: rebeccapurple;
    }
  }
}

// VHS logo defaults
.vhs-logo {
  height: 16px;
  width: 100%;
  &-wrapper {
    font-size: 4px;
    margin-top: 1px;
    text-align: right;
    width: 32px;
  }
}

// Cassette Grid
.cassette-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  grid-gap: 1em;
  list-style: none;
  padding-left: 0;
  width: 80%;
  max-width: 800px;
}

// Cassette Defaults
.cassette {
  background: hsl(45, 81%, 92%);
  box-shadow: 2px 2px 16px rgba(black, 0.21);
  height: 300px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 165px;

  &::before {
    background-color: rgba(black, 0.05);
    content: "";
    height: 100%;
    width: 3px;
    position: absolute;
    top: 0;
    left: 0;
  }

  // Individual Cassettes  
  &--polaroid {
    h2 {
      font-size: 26px;
      margin: 8px 0 10px;
    }
    .quality {
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -1px;
      &__details {
        font-size: 7px;
        font-weight: 300;
        letter-spacing: 3px;
        margin-bottom: 2px;
        text-align: justify;
        text-transform: uppercase;
        max-width: 102px;
      }
    }
    h2,
    .quality,
    .quality__details,
    .length,
    .vhs-logo-wrapper {
      margin-left: 6px;
    }
    .graphic {
      &--rainbow {
        background: linear-gradient(
          hsl(198, 97%, 39%) 0%,
          hsl(198, 97%, 39%) 20%,
          hsl(83, 52%, 48%) 20%,
          hsl(83, 52%, 48%) 40%,
          hsl(55, 99%, 50%) 40%,
          hsl(55, 99%, 50%) 60%,
          hsl(25, 95%, 54%) 60%,
          hsl(25, 95%, 54%) 80%,
          hsl(335, 93%, 61%) 80%
        );
        position: relative;
        height: 135px;
        width: 106px;

        &::before {
          background-color: rgba(black, 0.1);
          content: "";
          height: 100%;
          width: 3px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .length {
      font-family: Oswald, sans-serif;
      font-size: 14px;
      font-weight: 600;
      margin-top: 8px;
    }
    .code {
      font-family: Oswald, sans-serif;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -1px;
      position: absolute;
      right: 4px;
      bottom: 6px;
    }

    &::after {
      // cassette peek
      background: linear-gradient(
        45deg,
        hsl(100, 3%, 20%) 22%,
        hsl(100, 2%, 28%) 22%,
        hsl(100, 2%, 28%) 25%,
        hsl(100, 3%, 20%) 25%,
        hsl(100, 2%, 20%) 28%,
        hsl(100, 2%, 28%) 28%,
        hsl(100, 3%, 28%) 31%,
        hsl(100, 3%, 20%) 31%,
        hsl(100, 2%, 20%) 34%,
        hsl(100, 2%, 28%) 34%,
        hsl(100, 3%, 28%) 37%,
        hsl(100, 3%, 20%) 37%,
        hsl(100, 2%, 20%) 40%,
        hsl(100, 2%, 28%) 40%,
        hsl(100, 3%, 28%) 43%,
        hsl(100, 3%, 20%) 43%,
        hsl(100, 2%, 20%) 46%,
        hsl(100, 2%, 28%) 46%,
        hsl(100, 3%, 28%) 49%,
        hsl(100, 3%, 20%) 49%
      );
      border-radius: 5px;
      content: "";
      transform: rotate(45deg);
      position: absolute;
      top: 160px;
      right: -25px;
      height: 50px;
      width: 50px;
    }
  }

  &--jvcxr {
    background-color: hsl(218, 14%, 57%);

    .brand-wrapper {
      margin-bottom: 86px;
      padding: 8px;
      position: relative;
      &::before {
        background: linear-gradient(
          hsl(221, 3%, 18%),
          hsl(288, 7%, 44%) 55%,
          hsl(288, 7%, 44%) 70%,
          hsl(2, 65%, 48%) 70%
        );
        content: "";
        position: absolute;
        top: 0;
        left: 17px;
        height: 206px;
        width: 131px;
        clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
      }
    }

    h2 {
      color: hsl(2, 65%, 48%);
      font-family: "Teko", sans-serif;
      font-size: 58px;
      font-weight: 700;
      margin: 0;
      text-align: center;
    }
    .note {
      color: white;
      font-family: Oswald, sans-serif;
      font-size: 14px;
      margin: auto;
      text-align: center;
      max-width: 60px;
    }
    h2,
    .note {
      position: relative;
      z-index: 1;
    }
    .quality {
      font-family: Audiowide, sans-serif;
      font-size: 56px;
      font-weight: bolder;
      padding: 0 14px 0 10px;
      text-align: center;
      transform: scaleX(1.5);
      &__details {
        font-family: Oswald, sans-serif;
        font-size: 9px;
        font-weight: 300;
        margin-top: -11px;
        text-align: center;
        text-transform: uppercase;
        transform: scaleX(1.7);
      }
    }
    .code {
      &--large,
      &--small {
        position: absolute;
        left: 12px;
      }
      &--large {
        font-family: "Teko", sans-serif;
        font-size: 42px;
        font-weight: 400;
        transform: scaleX(1.2);
        top: 46%;
      }
      &--small {
        color: hsl(51, 38%, 83%);
        font-family: serif;
        font-size: 9px;
        font-style: italic;
        bottom: 9px;
      }
    }
    .name {
      font-family: Oswald, sans-serif;
      font-size: 8px;
      font-style: italic;
      font-weight: 400;
      position: relative;
      top: 11px;
      text-align: right;
      text-transform: uppercase;
      width: 73%;
    }
    .vhs-logo-wrapper {
      position: absolute;
      right: 9px;
      bottom: 9px;
    }
    
    &::after {
    // cassette peek
      background-color: hsl(120, 2%, 12%);
      border-radius: 2px 0 0 2px;
      box-shadow: -1px 1px rgba(white, 0.3), 1px -1px rgba(white, 0.3);
      content: '';
      height: 50px;
      width: 7px;
      position: absolute;
      top: 42%;
      right: 0;
    }
  }

  &--kodak {
    background-color: hsl(43, 99%, 50%);
    display: grid;
    grid-template-columns: 68px 1fr ;
    grid-template-rows: 1fr 40px;
    h2 {
      color: hsl(351, 95%, 42%);
      font-family: 'Martel Sans', sans-serif;
      font-size: 66px;
      font-weight: 900;
      grid-row: 1/-1;
      letter-spacing: -4px;
      @supports (writing-mode: sideways-lr) {
      // only works in FF: https://caniuse.com/#feat=mdn-css_properties_writing-mode_sideways_values
        margin: 3px 0 3px 12px;
        writing-mode: sideways-lr;
      }
      
      @supports not (writing-mode: sideways-lr) {
        margin: 240px 0 0 16px;
        transform: rotate(-90deg);
      }
    }
    .quality {
      color: hsl(39, 26%, 32%);
      font-family: Saira, sans-serif;
      font-size: 34px;
      font-weight: 600;
      &-wrapper {
        align-items: flex-end;
        background-color: hsl(49, 11%, 9%);
        display: flex;
        height: 90px;
        justify-content: flex-end;
        padding: 2px 50px;
        position: absolute;
        top: -30px;
        left: -30px;
        transform: rotate(-25deg);
        width: 120%;
        &::before {
          background: linear-gradient(
            hsl(39, 26%, 26%) 0%,
            hsl(47, 20%, 39%) 2%,
            transparent 2%,
            transparent 14%,
            hsl(39, 26%, 26%) 14%,
            hsl(47, 20%, 39%) 17%,
            transparent 17%,
            transparent 26%,
            hsl(39, 26%, 26%) 26%,
            hsl(47, 20%, 39%) 30%,
            transparent 30%,
            transparent 38%,
            hsl(39, 26%, 26%) 38%,
            hsl(47, 20%, 30%) 47%,
            transparent 47%,
            transparent 51%,
            hsl(39, 26%, 26%) 51%,
            hsl(47, 20%, 30%) 66%,
            transparent 66%,
            transparent 70%,
            hsl(39, 26%, 26%) 70%,
            hsl(47, 20%, 30%) 90%,
            transparent 90%
          );
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          height: 45px;
          width: 42%;
          transform: skewX(-16deg);
        }
      }
    }
    .details-wrapper {
      align-self: center;
      position: relative;
      top: 58px;
      text-align: center;
      transform: rotate(-30deg);
      max-width: 8ch;
    }
    .name {
      letter-spacing: -1px;
      margin-left: 8px;
    }
    .code {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -1px;
    }
    .logos {
      align-items: center;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-around;
      list-style: none;
      padding-left: 0;
    }
    .logo {
      height: 36px;
      width: 40px;
    }
    &::after {
    // cassette peek
      background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        hsl(73, 6%, 17%) 2px,
        hsl(73, 6%, 17%) 3px
      ),
        repeating-linear-gradient(
        hsl(73, 6%, 22%),
        hsl(73, 6%, 22%) 2px,
        hsl(73, 6%, 17%) 2px,
        hsl(73, 6%, 17%) 3px
      );
      border-radius: 2px;
      box-shadow: -1px 1px rgba(white, 0.3), 1px -1px rgba(white, 0.3);
      content: '';
      position: absolute;
      top: 42%;
      right: -27px;
      height: 50px;
      width: 42px;
      transform: rotate(-30deg);
    }
  }

  &--hitachi {
    background: linear-gradient(to left, hsl(43, 58%, 84%), hsl(41, 78%, 91%));
    color: hsl(58, 11%, 53%);
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    .logo, .vhs-logo {
      fill: hsl(58, 11%, 53%);
    }
    .vhs-logo {
      stroke: hsl(58, 11%, 53%);
    }
    h2 {
      align-items: center;
      display: flex;
      justify-content: space-around;
      padding: 0 10px;
      text-transform: uppercase;
      svg {
        height: 30px;
      }
    }
    .details {
      position: relative;
      top: 30px;
      left: 10px;
      transform: rotate(-40deg);
      
      &::before {
        background: linear-gradient(
          135deg,
          hsl(45, 98%, 53%),
          hsl(45, 98%, 53%) 12%,
          transparent 12%,
          transparent 13%,
          hsl(30, 100%, 50%) 13%,
          hsl(30, 100%, 50%) 26%,
          transparent 26%,
          transparent 27%,
          hsl(25, 100%, 50%) 27%,
          hsl(25, 100%, 50%) 39%,
          transparent 39%,
          transparent 40%,
          hsl(349, 98%, 40%) 40%,
          hsl(349, 98%, 40%) 54.25%,
          transparent 54.25%,
          transparent 55.25%,
          hsl(314, 64%, 50%) 55.25%,
          hsl(314, 64%, 50%) 71%,
          transparent 71%
        );
        clip-path: polygon(0.65% 0%, 74.11% 0%, 99.18% 38.18%, 85.89% 60.91%, 64.38% 60.91%, 64.11% 83.64%, 39.18% 102.73%, 15.62% 82.73%, 0.65% 89%);
        content: '';
        height: 110px;
        width: 146px;
        position: absolute;
        top: -21px;
        left: 17px;
        transform: rotate(40deg);
      }
    }
    .code {
      font-family: 'Quattrocento Sans', sans-serif;
      font-size: 62px;
      font-weight: 700;
      letter-spacing: -7px;
      margin-left: 39px;
      transform: scaleX(1.5) scaleY(1.21);
      svg {
        width: 90%;
      }
      text {
        fill: hsl(45, 81%, 92%);
        stroke: currentcolor;
        stroke-width: 2;
      }
    }
    .vhs-logo-wrapper {
      position: absolute;
      top: 60px;
      left: -20px;
    }
    &::after {
    // cassette peek
      background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 2px,
        hsl(150, 2%, 14%) 2px,
        hsl(150, 2%, 14%) 3px,
      ),
        repeating-linear-gradient(
        45deg,
        hsl(150, 2%, 17%),
        hsl(150, 2%, 17%) 4px,
        hsl(150, 2%, 25%) 4px,
        hsl(150, 2%, 25%) 5px,
      );
      border-radius: 5px;
      content: "";
      transform: rotate(45deg);
      position: absolute;
      top: 140px;
      right: -25px;
      height: 50px;
      width: 50px;
    }
  }

  &--jvchr {
    color: hsl(250, 51%, 21%);
    h2 {
      font-family: "Teko", sans-serif;
      font-size: 58px;
      font-weight: 700;      
    }
    .vhs-logo {
      fill: hsl(250, 51%, 21%);
      stroke: hsl(250, 51%, 21%);
    }
    &::after {
    // cassette peek
    }
  }

  &--philips {
    background: linear-gradient(
      hsl(78, 5%, 17%),
      hsl(51, 7%, 39%),
      hsl(49, 9%, 60%),
      hsl(46, 38%, 92%)
    );
    &::after {
    // cassette peek
    }
  }

  &--agfa {
    &::after {
    // cassette peek
    }
  }

  &--basf {
    background: hsl(199, 22%, 68%);
    &::after {
    // cassette peek
    }
  }
}