:root {
  --font-family: Verdana;
}

.milestone {
  --border-width: 0.15rem;
  --color-black: hsl(0, 0%, 0%);
  --color-butter: hsl(52, 100%, 83%);
  --color-carbon: hsl(219, 6%, 58%);
  --color-cheese: hsl(51, 100%, 93%);
  --color-cloud: hsl(219, 100%, 93%);
  --color-ghost: hsl(171.4, 17.1%, 92%);
  --color-green: hsl(110, 88%, 37%);
  --color-grey: hsl(240, 7%, 97%);
  --color-sea: hsl(210, 24%, 15%);
  --color-ice: hsl(216, 100%, 98%);
  --color-major: hsl(231, 97%, 29%);
  --color-minor: hsl(203, 74%, 45%);
  --color-orange: hsl(24.8, 100%, 50.2%);
  --color-patch: hsl(199, 83%, 62%);
  --color-powder: hsl(0, 0%, 98%);
  --color-red: hsl(0, 100%, 50%);
  --color-slate: hsl(211, 23%, 41%);
  --color-smoke: hsl(229, 31%, 93%);
  --color-white: hsl(0, 0%, 100%);

  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  margin: 0 12vw;

  .header {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 1rem 0;

    .title {
      margin: 0;
    }

    .date {
      font-size: 1.4rem;
      font-weight: 600;
      margin: 0;
    }
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
  }

  .toggle {
    background-color: var(--color-white);
    border: 0.1rem solid var(--color-sea);
    border-radius: 0.5rem;
    color: var(--color-sea);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.9rem;
    width: 5rem;
  }

  .normal {
    border-width: var(--border-width);
    border-style: solid;
    border-color: transparent;
    border-bottom-color: var(--color-ghost);
  }

  .alert {
    border: var(--border-width) solid var(--color-orange);
  }

  .error {
    border: var(--border-width) solid var(--color-red);
  }

  .avatar {
    border-radius: 50%;
  }

  .columns {
    background-color: var(--color-black);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    color: var(--color-white);
    display: grid;
    grid-template: 1fr / 4.7fr 1fr 1fr 1fr 1fr 1fr;
    padding: 0.3rem 0;

    .label {
      font-weight: 600;
      text-align: center;
    }
  }

  .row {
    .label {
      font-weight: 600;
    }
  }

  .row[open] > .summary::before {
    content: "\25BC";
    width: 0.5rem;
  }

  .summary {
    align-items: center;
    display: grid;
    gap: 0 1rem;
    grid-template: 1fr / auto 5fr 1fr 1fr 1fr 1fr 1fr;
    padding: 0.15rem 0;
    margin: 0.25rem 0 0 0;

    &::-webkit-details-marker {
      display:none;
    }

    &::before {
      content: "\25B6";
      cursor: pointer;
      width: 0.5rem;
    }

    &:hover {
      background-color: var(--color-powder);
    }

    .title {
      align-items: center;
      display: flex;
      gap: 0 0.5rem;
    }

    .subject {
      word-break: break-word;
    }

    .author,
    .files,
    .lines,
    .issue,
    .review {
      text-align: center;
    }

    .avatar {
      vertical-align: middle;
    }

    .lines {
      .deletions {
        color: var(--color-green);
      }

      .insertions {
        color: var(--color-red);
      }
    }
  }

  .details {
    display: grid;
    gap: 1rem;
    grid-template: auto auto auto / auto 1fr;
    grid-template-areas:
      "tag message"
      "tag notes"
      "tag info";

    @media (width >= 1000px) {
      grid-template: 1fr auto / auto 2fr 1fr;
      grid-template-areas:
        "tag message info"
        "tag notes info";
    }

    .tag {
      align-self: stretch;
      grid-area: tag;
      padding: 0.5rem 0.2rem 0.5rem 0.1rem;
      text-align: center;
      text-transform: capitalize;
      writing-mode: vertical-lr;
      padding: 0 0.2rem;
    }

    .major {
      background-color: var(--color-major);
      color: var(--color-white);
    }

    .minor {
      background-color: var(--color-minor);
      color: var(--color-white);
    }

    .patch {
      background-color: var(--color-patch);
      color: var(--color-black);
    }

    .rebase {
      background-color: var(--color-orange);
      color: var(--color-white);
    }

    .invalid {
      background-color: var(--color-red);
      color: var(--color-white);
    }

    .unknown {
      background-color: var(--color-carbon);
      color: var(--color-white);
    }

    .bar {
      border-radius: 0.5rem 0.5rem 0 0;
      color: var(--color-black);
      font-size: 1rem;
      font-weight: 600;
      padding: 0 0 0 0.5rem;
      margin: 0;
    }

    .panel {
      display: flex;
      flex-direction: column;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .message {
      background-color: var(--color-grey);
      border-radius: 0.5rem;
      grid-area: message;
      margin-top: 1rem;

      .bar {
        background-color: var(--color-smoke);
      }

      .content {
        margin: 0 0.5rem;
        word-break: break-word;
      }
    }

    .notes {
      background-color: var(--color-cheese);
      border-radius: 0.5rem;
      grid-area: notes;
      margin-bottom: 1rem;

      .bar {
        background-color: var(--color-butter);
      }

      .content {
        margin: 0 0.5rem;
      }
    }

    .info {
      grid-area: info;
      background-color: var(--color-ice);
      border-radius: 0.5rem;
      margin: 1rem 0;

      .bar {
        background-color: var(--color-cloud);
      }

      .label {
        font-size: 0.9rem;
      }

      .item {
        align-self: start;
        display: flex;
        gap: 0.5rem;
        margin: 0;
      }

      .pill {
        border-radius: 0.5rem;
        padding: 0.1rem 0.4rem;
      }

      .secure {
        background-color: var(--color-green);
        color: var(--color-white);

        .signature::before {
          content: "\1F512";
          margin-right: 0.5rem;
        }
      }

      .insecure {
        background-color: var(--color-red);
        color: var(--color-white);

        .signature::before {
          content: "\1F513";
          margin-right: 0.5rem;
        }
      }

      .at {
        flex-wrap: wrap;

        .weekday {
          &:before {
            content: "(";
          }

          &:after {
            content: ")";
          }
        }
      }
    }
  }

  .dormant {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;

    &::before {
      content: "\1F303";
      font-size: 10rem;
    }
  }

  .totals {
    display: flex;
    gap: 0 0.5rem;
    font-weight: 600;
    justify-content: center;

    .files {
      color: var(--color-slate);
    }

    .deletions {
      color: var(--color-green);
    }

    .insertions {
      color: var(--color-red);
    }
  }
}

.footer {
  .generator {
    display: flex;
    font-family: var(--font-family);
    font-style: italic;
    justify-content: center;
    margin-top: 2rem;
  }

  .link {
    padding-left: 0.3rem;
  }
}