@import url("/assets/css/vendor/modern-normalize.v2.0.0.min.css")
layer(normalize);

@layer reset {
  :root {
    line-height: 1.5;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  figure,
  p,
  ol,
  ul {
    margin: unset;
  }

  ol,
  ul {
    list-style: none;
    padding-inline: 0;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  img {
    display: block;
    max-inline-size: 100%;
  }
}

/* This font is subset for only the logo characters: "Gluestick" */
@font-face {
  font-display: swap;
  font-family: "Madimi One";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/MadimiOne-v1-GluestickSubset.woff2") format("woff2");
}

/* For feather icons */
svg.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

:root {
  --color-white: #fefefe;
  --color-grey-200: #c9c9c9;
  --color-grey-500: #808080;
  --color-grey-800: #383838;
  --color-black: #151515;

  --color-feather-yellow: #fffae6;
  --color-midnight-blue: #242836;
  --color-space-cadet-blue: #303446;
  --color-jigglypuff-pink: #ffa7ee;
  --color-fusion-red: #ff565b;
  --color-celery-green: #bffea4;

  --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 4.5rem;
  --font-size-6xl: 7rem;

  --line-height-text: 1.5;
  --line-height-heading: 1.1;

  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3.25rem;
  --spacing-2xl: 5.25rem;
  --spacing-3xl: 7rem;

  --content-width: 960px;
}

html {
  height: 100%;
}

body {
  background-color: var(--color-midnight-blue);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  --svg-border-height: 65px;

  background-color: var(--color-feather-yellow);
  color: var(--color-black);
  position: relative;
  padding-bottom: var(--svg-border-height);

  nav {
    max-width: 100%;
    margin: 0 auto;
    width: var(--content-width);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    display: grid;
    grid-template-areas:
      "left center right"
      "menu menu menu";
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xs);

    a {
      color: var(--color-black);
      font-size: var(--font-size-xl);
      line-height: var(--line-height-heading);
      text-decoration: none;
    }

    .menu-button {
      grid-area: left;
      cursor: pointer;

      button {
        background: transparent;
        border: none;
        pointer-events: none;
      }
    }

    .logo {
      grid-area: center;
      font-family:
        Madimi One,
        sans-serif;
      font-size: var(--font-size-3xl);
    }

    .main-nav {
      grid-area: menu;
      display: none;
    }

    .highlight-nav {
      grid-area: right;

      .with-border {
        border: 2px solid var(--color-black);
        border-radius: 5%;
        padding: var(--spacing-2xs);
      }
    }

    #menu-state {
      display: none;
    }

    #menu-state:checked + .main-nav {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }
  }

  @media (min-width: 768px) {
    nav {
      .logo {
        grid-area: left;
      }

      .main-nav,
      #menu-state:checked + .main-nav {
        grid-area: right;
        display: flex;
        flex-direction: row;
        gap: var(--spacing-md);
      }

      .menu-button {
        display: none;
      }

      .highlight-nav {
        display: none;
      }
    }
  }

  .svg-border {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: var(--svg-border-height);
  }
}

main {
  --color-input-background: var(--color-space-cadet-blue);

  max-width: 100%;
  margin: 0 auto;
  width: var(--content-width);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  flex: 1;

  h1,
  h2 {
    line-height: var(--line-height-heading);
    font-weight: normal;
    margin-bottom: var(--spacing-sm);
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  a {
    color: var(--color-white);
    text-decoration-color: var(--color-jigglypuff-pink);

    &:hover {
      color: var(--color-jigglypuff-pink);
    }
  }

  pre {
    margin: unset;
    background-color: var(--color-input-background);
    border: 1px solid var(--color-grey-500);
    padding: var(--spacing-sm);
    box-shadow: 10px 10px 0 0 var(--color-black);
    overflow-y: auto;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    color: var(--color-white);
    background-color: var(--color-input-background);
    border: 1px solid var(--color-grey-500);
    line-height: var(--line-height-heading);
    padding: var(--spacing-2xs) var(--spacing-xs);
    box-shadow: 10px 10px 0 0 var(--color-black);
  }

  textarea {
    color: var(--color-white);
    background-color: var(--color-input-background);
    border: 1px solid var(--color-grey-500);
    padding: var(--spacing-sm);
    box-shadow: 10px 10px 0 0 var(--color-black);
    resize: none;
    white-space: pre;
    line-height: var(--line-height-text);
    font-family: var(--font-monospace);
  }

  fieldset {
    background-color: var(--color-input-background);
    border: 1px solid var(--color-grey-500);
    box-shadow: 10px 10px 0 0 var(--color-black);
  }

  .validated-input {
    label {
      font-size: var(--font-size-sm);
      color: var(--color-grey-200);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
      display: block;
      margin-bottom: var(--spacing-xs);
    }

    .error-msg {
      color: var(--color-fusion-red);
      font-size: var(--font-size-sm);
    }

    &.invalid {
      input[type="text"],
      input[type="email"],
      input[type="password"],
      textarea {
        border: 1px solid var(--color-fusion-red);
      }
    }
  }

  a.button {
    text-decoration: none;
  }

  button,
  a.button {
    border: unset;
    box-shadow: 10px 10px 0 0 var(--color-black);
    line-height: var(--line-height-text);
    padding: var(--spacing-2xs) var(--spacing-sm);
    cursor: pointer;

    &.primary {
      color: var(--color-black);
      background-color: var(--color-celery-green);
    }
  }

  .content-pair {
    display: grid;
    grid-template-areas:
      "item1"
      "item2";
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);

    .item-1,
    .item-2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .item-1 {
      grid-area: item1;
    }

    .item-2 {
      grid-area: item2;
    }
  }

  @media (min-width: 640px) {
    .content-pair {
      grid-template-areas: "item1 item2";
      gap: var(--spacing-lg);

      .item-1,
      .item-2 {
        align-items: flex-start;
        text-align: unset;
      }
    }
  }
}

.login,
.signup {
  align-items: center;
  font-size: var(--font-size-lg);

  .validated-input {
    margin-bottom: var(--spacing-md);

    input {
      font-size: var(--font-size-xl);
    }
  }
}

.unauthorized,
.forbidden,
.not-found,
.internal-server-error {
  font-size: var(--font-size-lg);
}

.about {
  gap: var(--spacing-xl);

  .hero {
    img {
      width: 250px;
      height: 298px;
    }

    h1 {
      font-size: var(--font-size-3xl);
    }

    .logo {
      font-family:
        Madimi One,
        sans-serif;
      color: var(--color-feather-yellow);
    }

    .button {
      font-size: var(--font-size-2xl);
    }
  }

  .content-pair {
    font-size: var(--font-size-lg);
  }

  @media (min-width: 640px) {
    .hero {
      grid-template-areas: "item1 item1 item2";

      h1 {
        font-size: var(--font-size-4xl);
      }
    }
    .content-pair:nth-of-type(even) {
      grid-template-areas: "item2 item1";
    }
  }

  @media (min-width: 768px) {
    .hero img {
      width: 300px;
      height: 357px;
    }
  }
}

.pastes-index,
.users-show {
  .paste {
    margin-bottom: var(--spacing-lg);

    .filename-bar {
      font-size: var(--font-size-lg);
      line-height: var(--line-height-text);
      margin-bottom: var(--spacing-2xs);

      .secret-tag {
        background-color: var(--color-space-cadet-blue);
        padding: var(--spacing-2xs) var(--spacing-xs);
        border: 1px solid var(--color-grey-500);
        font-size: var(--font-size-xs);
        margin-left: var(--spacing-xs);
      }
    }

    .description-bar,
    .metadata-bar {
      color: var(--color-grey-200);
      line-height: var(--line-height-text);
    }

    .description-bar {
      font-size: var(--font-size-sm);
    }

    .metadata-bar {
      flex-wrap: wrap;
      margin-bottom: var(--spacing-xs);
      font-size: var(--font-size-xs);
    }

    pre {
      font-size: var(--font-size-sm);
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0 var(--spacing-2xl);
    font-size: var(--font-size-lg);
  }

  .pagination {
    display: flex;
    justify-content: center;

    span,
    a {
      margin-right: var(--spacing-sm);
    }

    span {
      color: var(--color-grey-500);
      cursor: default;
    }
  }
}

.pastes-show {
  h1 .secret-tag {
    background-color: var(--color-space-cadet-blue);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border: 1px solid var(--color-grey-500);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
  }

  .description-bar,
  .metadata-bar {
    color: var(--color-grey-200);
    line-height: var(--line-height-text);
  }

  .description-bar {
    font-size: var(--font-size-xl);
  }

  .metadata-bar {
    --metadata-bar-font-size: var(--font-size-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: var(--metadata-bar-font-size);
    margin-bottom: var(--spacing-sm);

    .actions {
      display: flex;
      flex-wrap: wrap;

      a,
      button {
        display: flex;
        align-items: center;
        background: unset;
        border: unset;
        padding: unset;
        text-decoration: unset;
        box-shadow: unset;
        margin: 0 var(--spacing-sm) 0 0;
        color: var(--color-grey-200);
        cursor: pointer;

        svg {
          height: var(--metadata-bar-font-size);
          width: var(--metadata-bar-font-size);
          margin-right: var(--spacing-2xs);
        }

        &:hover {
          color: var(--color-jigglypuff-pink);
        }
      }
    }
  }

  #body.hidden {
    visibility: hidden;
    height: 0;
    width: 0;
  }
}

.pastes-new,
.pastes-edit {
  display: flex;
  flex: 1;

  form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;

    .filename,
    .description {
      margin-bottom: var(--spacing-xs);

      input {
        width: 100%;
        font-size: var(--font-size-lg);
      }
    }

    .body {
      margin-bottom: var(--spacing-xs);
      display: flex;
      flex-direction: column;
      flex: 1;

      textarea {
        flex: 1;
      }
    }

    .visibility {
      margin-bottom: var(--spacing-md);

      label {
        display: block;
      }
    }

    button.primary {
      align-self: flex-start;
    }
  }
}

.settings {
  section {
    margin-bottom: var(--spacing-xl);
  }

  .change-password {
    .success-message {
      color: var(--color-celery-green);
      margin-bottom: var(--spacing-xs);
    }

    input {
      font-size: var(--font-size-lg);
    }

    .new-password-inputs {
      margin-bottom: var(--spacing-md);
    }
  }

  .api-keys {
    button.primary {
      margin-bottom: var(--spacing-lg);
    }

    .key {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: var(--color-input-background);
      border: 1px solid var(--color-grey-500);
      padding: var(--spacing-sm);
      box-shadow: 10px 10px 0 0 var(--color-black);
      margin-bottom: var(--spacing-lg);

      .instructions,
      .created-at,
      .last-used-at {
        font-size: var(--font-size-sm);
        color: var(--color-grey-200);
      }

      .copy-button {
        color: var(--color-white);
        background-color: unset;
        box-shadow: unset;
        padding: unset;

        svg.icon {
          height: var(--font-size-md);
          width: var(--font-size-md);
        }

        &:hover {
          color: var(--color-jigglypuff-pink);
        }
      }

      .delete-controls {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
      }

      .delete-button {
        background-color: var(--color-midnight-blue);
        color: var(--color-fusion-red);
        border: 1px solid var(--color-grey-800);
        border-radius: 5px;
        box-shadow: unset;
        font-size: var(--font-size-sm);
      }
    }
  }
}