@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes grow {
  from {
    transform: scale(0.9, 0.9);
  }

  to {
    transform: scale(1, 1);
  }
}

@keyframes shrink {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(0.9, 0.9);
  }
}

@keyframes help-text-reveal {
  0% {
    grid-template-rows: 0fr;
    opacity: 0;
  }

  50% {
    grid-template-rows: 1fr;
    opacity: 0;
  }

  100% {
    grid-template-rows: 1fr;
    opacity: 0.2;
  }
}

@keyframes help-text-hide {
  0% {
    grid-template-rows: 1fr;
    opacity: 0.2;
  }

  50% {
    grid-template-rows: 1fr;
    opacity: 0;
  }

  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

main {
  block-size: 100%;
  min-block-size: 0;

  .tab-content:not([hidden]) {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
  }

  .top-panel,
  .content-panel,
  .bottom-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
  }

  .content-panel {
    flex: 1;
    overflow-block: auto;
    justify-content: start;
  }

  /* .bottom-panel {
    position: fixed;
    inset-block-end: 0;
  } */

  #content-stopwatch:not([hidden]) {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: 100%;

    .stopwatch-panel {
      box-shadow: inset 0 2px 8px hsl(0deg 0% 0% / 50%);
      background:
        radial-gradient(ellipse 140% 190% at top,
          hsl(0deg 0% 100% / 10%) 5%,
          transparent 50%),
        radial-gradient(ellipse 350% 400% at 190% 150%,
          transparent 49.5%,
          hsl(0deg 0% 100% / 5%) 50.5%),
        linear-gradient(to bottom,
          hsl(0deg 0% 100% / 5%) 39%,
          transparent 41%),
        linear-gradient(to bottom,
          hsl(0deg 0% 0% / 75%));
      inline-size: 100%;

      #stopwatch {
        display: flex;
        gap: 0.15em;
        align-items: baseline;
        justify-content: center;
        margin: 0;
        padding: 0.25em 0;
        inline-size: 100%;
        font-family: "7-Segment", monospace;
        font-size: min(22vi, 96pt);
        font-weight: initial;

        .centiseconds {
          font-size: 0.45em;
        }

        .hhmmss::before,
        .centiseconds::before {
          position: absolute;
          opacity: 0.05;
        }

        .hhmmss::before {
          content: var(--stopwatch-digit-backdrop, "88:88:88");
        }

        .centiseconds::before {
          content: "88";
        }
      }

      .stopwatch-subtitle {
        margin: -1vi 0 1rem;
        text-align: center;
      }

      #stopwatch-lap-stopwatch:not([hidden]) {
        display: flex;
        gap: 0.15em;
        align-items: baseline;
        justify-content: center;
        margin: 0;
        padding: 0.25em 0 0.5em;
        inline-size: 100%;
        font-family: "7-Segment", monospace;
        font-size: 2rem;
        font-weight: initial;

        .centiseconds {
          font-size: 0.45em;
        }

        .hhmmss::before,
        .centiseconds::before {
          position: absolute;
          opacity: 0.05;
        }

        .hhmmss::before {
          content: var(--stopwatch-digit-backdrop, "88:88:88");
        }

        .centiseconds::before {
          content: "88";
        }
      }
    }

    #stopwatch-help:not([hidden]) {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        margin-block-start: 1em;
        block-size: 6rem;
        filter: drop-shadow(0 2px 4px hsl(0deg 0% 0% / 50%))
      }
    }

    #stopwatch-laps {
      display: flex;
      flex-direction: column-reverse;
      margin: 1rem 0;
      inline-size: min(100%, 522px);
      /* inline-size: 100%; */

      .stopwatch-lap {
        display: flex;
        flex-wrap: wrap;
        /* gap: 0.75em; */
        align-items: center;
        justify-content: end;
        transition-duration: 500ms;
        margin: 0;
        /* cursor: pointer; */
        border-block-start-width: 1px;
        border-block-start-color: hsl(0deg 0% 100% / 15%);
        padding: 1em 2rem;

        &:not(:last-child) {
          border-block-start: 1px solid hsl(0deg 0% 100% / 15%);
          /* box-shadow: 0 -1px 0 hsl(0deg 0% 100% / 15%); */
        }

        &:hover {
          transition-duration: 50ms;
          background-color: #0E628C;
        }

        .stopwatch-lap-number {
          flex: 0.6667;
          text-align: end;
          color: #C5A697;
          font-size: 1.8em;
        }

        .stopwatch-lap-time-total {
          flex: 1.5;
          margin: 0 2rem;
          text-align: end;
          color: hsl(0deg 0% 100% / 75%);
          font-size: 0.9em;
        }

        .stopwatch-lap-time-lap-hhmmss {
          display: flex;
          flex: 2.5;
          flex-wrap: wrap;
          align-items: center;
          justify-content: end;
          font-size: 2.1em;

          .stopwatch-lap-time-lap-centiseconds {
            padding-block-start: 3pt;
            font-size: 0.5em;
          }

          .hhmmss::before,
          .centiseconds::before {
            position: absolute;
            opacity: 0.05;
          }

          .hhmmss::before {
            content: var(--stopwatch-digit-backdrop, "88:88:88");
          }

          .centiseconds::before {
            content: "88";
          }
        }
      }
    }
  }

  #content-timer:not([hidden]) {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: 100%;

    .top-panel {
      position: absolute;
      align-items: end;

      #timer-settings {
        z-index: 10;
      }
    }

    .content-panel {
      justify-content: center;
    }

    #timer-help-text:not([hidden]) {
      display: grid;
      transition: opacity 500ms, grid-template-rows 500ms;
      overflow: hidden;

      > span {
        min-block-size: 0;
      }

      &.reveal {
        animation: 500ms ease-in-out help-text-reveal;
        animation-fill-mode: forwards;
      }

      &.hide {
        animation: 500ms ease-in-out help-text-hide;
        animation-fill-mode: forwards;
      }
    }

    #timer {
      .labels {
        display: flex;
        gap: min(5vi, 1.5rem);
        margin: 0 0 0.5em;
        padding: 0;
        font-size: min(5vi, 1.5rem);

        .timer-label {
          flex: 1;
        }
      }

      .timer {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        border: 4px groove hsl(0deg 0% 50%);
        border-radius: 8px;
        box-shadow: 0 2px 8px hsl(0deg 0% 0% / 100%),
          inset 0 2px 8px hsl(0deg 0% 0% / 50%);
        background:
          radial-gradient(ellipse 140% 190% at top,
            hsl(0deg 0% 100% / 10%) 5%,
            transparent 50%),
          radial-gradient(ellipse 350% 400% at 190% 150%,
            transparent 49.5%,
            hsl(0deg 0% 100% / 5%) 50.5%),
          linear-gradient(to bottom,
            hsl(0deg 0% 100% / 5%) 39%,
            transparent 41%),
          linear-gradient(to bottom,
            hsl(0deg 0% 0% / 75%));
        padding: 0.55ch 0 0;

        * {
          font-family: "7-Segment", monospace;
          font-size: min(21vi, 96pt);
          font-weight: initial;
        }

        .input-wrapper {
          display: inline-block;
          position: relative;
          inline-size: 2.8ch;

          .timer-input {
            position: relative;
            border: none;
            background: none;
            inline-size: 1.25em;
            text-align: center;
            caret-color: transparent;

            &:disabled {
              color: white;
            }

            &:focus-visible {
              outline: none;
              text-shadow: 0 0 1px #33C5F5;
              color: #33C5F5;
            }
          }

          .backdrop {
            display: flex;
            position: absolute;
            inset: 0;
            align-items: center;
            justify-content: center;
            opacity: 0.05;
            line-height: 1.05em;
            color: currentcolor;
            font-family: inherit;
            font-size: inherit;
            pointer-events: none;
          }
        }
      }
    }
  }

  #content-clock:not([hidden]) {
    display: flex;
    flex: 1;
    align-items: center;
    block-size: 100%;

    .overlay-buttons {
      display: flex;
      position: absolute;
      align-items: end;
      justify-content: end;
      inline-size: 100%;

      /* #clock-fullscreen {
      } */
    }

    .top-panel {
      background: linear-gradient(to bottom,
          hsl(0deg 0% 0% / 50%),
          hsl(0deg 0% 0% / 25%) 25%,
          transparent);
      padding: 5vb 0;
      overflow: hidden;
      text-shadow: 0 1.5px 2px hsl(0deg 0% 0% / 100%);
    }

    .content-panel {
      flex: 1.5;
      align-items: center;
      justify-content: center;
      padding: 10vb 0;
      overflow: hidden;
    }

    .bottom-panel {
      /* flex: 1; */
      align-items: center;
      justify-content: start;

      &[hidden] {
        display: none;
      }
    }

    .time-bar-area {
      /* opacity: 0.75; */
      inline-size: 98%;
      text-align: center;

      .time-bar-labels {
        display: flex;
        margin: 1em 0 0;

        .time-bar-label {
          display: flex;
          flex: 1;
          align-items: end;
          justify-content: center;
          opacity: 0.5;
          min-inline-size: 0;
          font-family: "Android Clock", "Fira Code", monospace;

          @media (width < 768px) {
            &:nth-child(even) {
              position: relative;
              inset-block-start: 2.5em;
            }
          }
        }

        @media (width < 320px) {
          display: none;
        }
      }

      progress {
        /* stylelint-disable-next-line property-no-vendor-prefix */
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
        border: none;
        inline-size: 96%;

        &[value] {
          border-radius: 4px;
          box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 25%),
            inset 0 0 0 1px hsl(0deg 0% 100% / 25%),
            inset 0 2px 8px 2px hsl(0deg 0% 0% / 25%),
            0 2px 4px hsl(0deg 0% 0% / 50%);
          background: repeating-linear-gradient(to right,
              hsl(0deg 0% 50% / 50%),
              hsl(0deg 0% 50% / 50%) 2px,
              transparent 2px,
              transparent calc((100% / 24))),
            linear-gradient(to bottom,
              hsl(0deg 0% 100% / 10%),
              hsl(0deg 0% 000% / 10%),
              hsl(0deg 0% 050% / 10%));
          background-position: -1px;
          block-size: 20px;

          &::-moz-progress-bar {
            background: linear-gradient(to right,
                hsl(0deg 0% 0% / 5%),
                hsl(0deg 0% 0% / 0%),
                hsl(0deg 0% 0% / 5%)),
              linear-gradient(to bottom,
                hsl(200deg 100% 75% / 50%),
                hsl(200deg 100% 25% / 50%),
                hsl(200deg 100% 50% / 50%));
          }
        }

        @media (width < 320px) {
          margin-block-start: 1em;
        }
      }

      ::-webkit-progress-bar {
        border-radius: 4px;
        background: none;
      }

      ::-webkit-progress-inner-element {
        border-radius: 4px;
        background: none;
      }

      ::-webkit-progress-value {
        border-radius: 4px;
        background: linear-gradient(to right,
            hsl(0deg 0% 0% / 5%),
            hsl(0deg 0% 0% / 0%),
            hsl(0deg 0% 0% / 5%)),
          linear-gradient(to bottom,
            hsl(200deg 100% 75% / 50%),
            hsl(200deg 100% 25% / 50%),
            hsl(200deg 100% 50% / 50%));
      }
    }

    #clock-time {
      margin: 0;
      /* background: linear-gradient(to bottom,
          hsl(0deg 0% 100%),
          hsl(0deg 0% 80%));
      color: transparent;
      background-clip: text; */
      padding: 0;
      text-shadow:
        0 0 2px hsl(0deg 0% 0% / 100%),
        0 2px 2px hsl(0deg 0% 0% / 50%);
      font-family: "Android Clock", monospace;
      /* font-size: 25vi; */
      font-size: min(25vi, calc(10vi + 25vb));

      /* &::before {
        display: block;
        position: relative;
        block-size: auto;
        inline-size: 100%;
        content: "";
      } */

      #clock-time-ss {
        font-size: 0.5em;
      }
    }

    #clock-date {
      text-shadow: 0 1.5px 2px hsl(0deg 0% 0% / 100%);
      color: #F6F7C9;
      font-family: "Fira Code", monospace;
      font-size: max(3vi, 1rem);
    }

    #clock-settings-popup {
      .popup-content {
        padding: 0 0 1rem;
        max-block-size: 50vb;
        overflow-block: auto;

        h2,
        h3,
        label {
          margin: 0;
          padding: 0 1rem;
          font-size: 1.14em;
          font-weight: initial;
        }

        h2 {
          opacity: 0.75;
          margin-block-end: -0.45rem;
          letter-spacing: 0.1rem;
          font-size: 1.14rem;
          font-weight: 300;
          font-style: italic;

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

        label {
          padding: 1rem 1rem 0;
        }

        input {
          /* margin: 0 0.25rem 1rem; */
          margin: 0 1rem 1rem;
        }

        .error-text {
          margin: -1rem 0 0;
          padding: 0 1rem 1rem;
        }

        .clock-settings-timezones-layer:not([hidden]) {
          display: flex;
          flex-direction: column;
          inline-size: 100%;
        }
      }
    }
  }

  #content-settings:not([hidden]) {
    padding: 0 1rem;

    .logo {
      max-inline-size: 64rem;
      filter: drop-shadow(0 2px 2px black);
    }

    .description {
      opacity: 0.3333;
      max-inline-size: 64rem;
      line-height: 1.5;
    }

    /* stylelint-disable no-descending-specificity */
    h1,
    h2 {
      opacity: 0.8;
      font-weight: 300;
    }

    .settings-area {
      inline-size: 100%;
      max-inline-size: 64rem;

      h1,
      h2 {
        margin-block-end: 0;
      }

      /* stylelint-enable no-descending-specificity */

      .setting {
        display: flex;
        align-items: center;
        transition-duration: 500ms;

        &:hover {
          transition-duration: 50ms;
          background: #0E628C;
        }

        .setting-label,
        .setting-switch {
          cursor: pointer;
          padding: 1rem;
        }

        .setting-label {
          display: flex;
          flex: 1;
          flex-direction: column;
          line-height: 1.3333;

          .setting-label-subtitle {
            /* opacity: 0.3333; */
            color: hsl(0deg 0% 100% / 50%);
            font-size: 0.8rem;
          }
        }

        .setting-switch {
          appearance: none;
          display: flex;
          margin: 0 1rem 0 0;
          border: 1px solid #142B3D;
          border-radius: 2px;
          box-shadow: inset 0 2px 2px hsl(0deg 0% 0% / 25%);
          background: #2F3F46;
          padding: 0;
          block-size: 26px;
          inline-size: 96px;

          &::before {
            display: flex;
            position: relative;
            inset-block-start: 0;
            inset-inline-start: 0;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            background: linear-gradient(to bottom,
                #7F8C93,
                #6A757B);
            block-size: 100%;
            inline-size: 50%;
            color: #C8ECFF;
            content: "OFF";
          }

          &:checked {
            flex-direction: row-reverse;

            &::before {
              background: linear-gradient(to bottom,
                  #72A912,
                  #538301);
              color: #EFFF97;
              content: "ON";
            }
          }
        }
      }
    }
  }

  .separator {
    box-shadow: 0 0 8px 4px hsl(0deg 0% 0% / 50%);
    background: linear-gradient(to right,
        hsl(0deg 0% 100% / 15%),
        hsl(0deg 0% 100% / 33.3333%),
        hsl(0deg 0% 100% / 15%));
    block-size: 2px;
    inline-size: 100%;
  }

  .help-text {
    opacity: 0.2;
    padding: 0 1em;
    text-align: center;
    line-height: 1.5;
  }

  .button-panel {
    display: flex;
    justify-content: center;
    box-shadow: inset 0 2px 8px hsl(0deg 0% 0% / 50%);
    background:
      radial-gradient(ellipse 140% 190% at top,
        hsl(0deg 0% 100% / 5%) 5%,
        transparent 50%),
      linear-gradient(to bottom,
        hsl(0deg 0% 0% / 50%));
    padding: 1rem 0;
    inline-size: 100%;
  }

  .button-area:not([hidden]) {
    display: flex;
    justify-content: center;
    inline-size: calc(100% - 10px);
  }

  .button {
    margin: 5px;
    border: 1px solid hsl(0deg 0% 0% / 75%);
    border-radius: 4px;
    box-shadow: 0 4px 4px hsl(0deg 0% 0% / 50%),
      inset 0 1px 0 hsl(0deg 0% 100% / 33.3333%),
      inset 0 -1px 0 hsl(0deg 0% 100% / 16.6665%);
    background: linear-gradient(to bottom,
        hsl(0deg 0% 40%),
        hsl(0deg 0% 30%));
    cursor: pointer;
    padding: 0.3333em 0;
    inline-size: 80%;
    max-inline-size: 256px;
    text-shadow: 0 1px 2px hsl(0deg 0% 0% / 100%);
    color: white;
    font-size: 1rem;

    &:hover:not(:disabled) {
      &:not(.immediate) {
        box-shadow: 0 4px 4px hsl(0deg 0% 0% / 50%),
          inset 0 1px 0 hsl(0deg 0% 100% / 10%),
          inset 0 -1px 0 hsl(0deg 0% 100% / 16.6665%);
        background: linear-gradient(to bottom,
            #0C4D70,
            #135D87);

        &:focus-visible {
          box-shadow:
            0 0 4px #16A1C3,
            inset 0 0 4px #16A1C3,
            0 4px 4px hsl(0deg 0% 0% / 50%),
            inset 0 1px 0 hsl(0deg 0% 100% / 10%),
            inset 0 -1px 0 hsl(0deg 0% 100% / 16.6665%);
        }
      }

      &.immediate {
        filter: brightness(1.2);
      }
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 4px #16A1C3,
        inset 0 0 4px #16A1C3,
        inset 0 1px 0 hsl(0deg 0% 100% / 33.3333%),
        inset 0 -1px 0 hsl(0deg 0% 100% / 16.6665%);
    }

    &:disabled {
      background: linear-gradient(to bottom,
          #ADB1B3,
          #949798);
      cursor: not-allowed;
      text-shadow: 0 1px 2px hsl(0deg 0% 0% / 75%);
      color: hsl(0deg 0% 25%);
    }
  }

  .button-green {
    background: linear-gradient(to bottom,
        #77BE1F,
        #58A41D);
  }

  .button-red {
    background: linear-gradient(to bottom,
        #E13E1E,
        #D22E0E);
  }

  .button-small {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
    border: 1px solid hsl(205deg 22% 11%);
    border-radius: 4px;
    box-shadow: none;
    background: linear-gradient(to bottom,
        hsl(210deg 16% 27%),
        hsl(210deg 15% 24%));
    cursor: pointer;
    /* padding: 0.3333em 1em; */
    padding: 0 4px;
    inline-size: auto;
    text-shadow: none;
    line-height: 1;
    color: hsl(0deg 0% 100% / 75%);
    font-size: 1rem;

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 4px #16A1C3,
        inset 0 0 4px #16A1C3;
    }

    &:focus-visible,
    &:active {
      .icon-settings {
        background: url("../assets/images/tw_action_bar_icon_setting_holo_dark.svg") no-repeat center/cover;
      }

      .icon-enter-fullscreen {
        background: url("../assets/images/cradle_btn_big_press.svg") no-repeat center/cover;
      }

      .icon-exit-fullscreen {
        background: url("../assets/images/cradle_btn_small_press.svg") no-repeat center/cover;
      }
    }

    &:hover:not(:disabled) {
      box-shadow: inset 0 4px 8px hsl(0deg 0% 0% / 25%);
      background: linear-gradient(to bottom,
          #0C4D70,
          #135D87);

      &:focus-visible {
        outline: none;
        box-shadow:
          0 0 4px #16A1C3,
          inset 0 0 4px #16A1C3,
          inset 0 4px 8px hsl(0deg 0% 0% / 25%);
      }
    }

    .icon {
      display: inline-block;
      block-size: 36px;
      inline-size: 36px;
    }

    /* stylelint-disable no-descending-specificity */
    .icon-settings {
      background: url("../assets/images/cradle_tw_action_bar_icon_setting_holo_dark.svg") no-repeat center/cover;
    }

    .icon-enter-fullscreen {
      background: url("../assets/images/cradle_btn_big.svg") no-repeat center/cover;
    }

    .icon-exit-fullscreen {
      background: url("../assets/images/cradle_btn_small.svg") no-repeat center/cover;
    }

    /* stylelint-enable no-descending-specificity */
  }
}

.popup-area:not([hidden]) {
  display: flex;
  position: absolute;
  inset-block-start: 0;
  align-items: center;
  justify-content: center;
  transition-duration: 1s;
  z-index: 100;
  background: hsl(0deg 0% 0% / 75%);
  block-size: 100%;
  inline-size: 100%;
  animation: 250ms ease-in-out fade-in;
  animation-fill-mode: forwards;

  &.close {
    animation: 250ms ease-in-out fade-out;
    animation-fill-mode: forwards;
  }
}

.popup-window {
  border: 2px solid #6E6E6E;
  border-radius: 4px;
  background: #0A3451;
  min-inline-size: 25vi;
  animation: 250ms ease-in-out fade-in, 200ms 50ms ease-in-out grow;
  animation-fill-mode: forwards;

  &.close {
    animation: 250ms ease-in-out fade-out, 200ms 50ms ease-in-out shrink;
    animation-fill-mode: forwards;
  }

  .popup-title {
    box-shadow: inset 0 -1px #678192,
      0 1px #071927;
    background: linear-gradient(to bottom,
        #276692,
        #1B4B6D);
    padding: 1rem 1rem 0.9rem;
    font-size: 1.28em;
  }

  /* stylelint-disable no-descending-specificity */
  .popup-content {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem 1.4rem;
    line-height: 1.5;
    color: #EBEBEB;

    label {
      pointer-events: none;
    }

    /* stylelint-enable no-descending-specificity */

    .submenu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition-duration: 500ms;
      border: none;
      background: none;
      padding: 0.5rem 1rem;
      font-size: 0.95rem;

      /* stylelint-disable-next-line no-descending-specificity */
      &::after {
        content: " →";
      }

      &:not(:first-child) {
        border-block-start: 1px solid hsl(0deg 0% 100% / 15%);
        /* box-shadow: 0 -1px 0 hsl(0deg 0% 100% / 15%); */
      }

      &:hover {
        transition-duration: 50ms;
        background: #0E628C;
        cursor: pointer;
      }

      &.back::after,
      &.option::after,
      &#timezone-utc::after {
        content: "";
      }
    }

    select {
      cursor: pointer;

      &:hover {
        box-shadow: 0 0 0 2px #007EAE;
      }
    }

    datalist,
    select,
    input[type="text"] {
      margin: 0.5em 0;
      border: none;
      border-radius: 2px;
      box-shadow: 0 0 0 1px #5D5D5D;
      background: white;
      padding: 0.5em 1em;
      color: black;
      caret-color: #67BFFE;

      /* stylelint-disable-next-line plugin/use-baseline */
      &::selection {
        background: #136a90;
      }


      &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #007EAE;
      }
    }

    /* stylelint-disable-next-line no-descending-specificity */
    .error-text {
      color: red;
    }

    &.popup-radio-options {
      padding: 0;

      /* stylelint-disable-next-line no-descending-specificity */
      h3 {
        margin: 0;
        padding: 1rem 1rem 0;
        font-size: 1.14em;
        font-weight: initial;
      }

      .small {
        margin: 0;
        padding: 0.25rem 1rem 1rem;
        color: hsl(0deg 0% 100% / 80%);
        font-size: 0.8rem;
      }

      .underneath-heading {
        padding: 0 1rem 0.25rem;
      }

      input[type="file"] {
        transition-duration: 500ms;
        margin: 0.5em 0;
        border: none;
        border-block-end: 1px solid hsl(0deg 0% 100% / 15%);
        border-radius: 2px;
        background: transparent;
        padding: 0.5em 1em;

        &::file-selector-button {
          margin: 0 0.5rem 0 0;
          border: 1px solid #5A5A5A;
          border-radius: 4px;
          background: linear-gradient(to bottom,
              #F2F4F6,
              #BDBDBD);
          padding: 0.9ch 1em;
          color: black;
          font-weight: bold;
        }

        &:hover:not(:disabled) {
          transition-duration: 50ms;
          background: hsl(200deg 82% 30% / 25%);
          cursor: pointer;

          &::file-selector-button {
            /* background: linear-gradient(to bottom,
                hsl(199deg 93% 23% / 75%),
                hsl(200deg 82% 30% / 75%)),
              linear-gradient(to bottom,
                #F2F4F6,
                #BDBDBD);
            color: white; */
            box-shadow:
              0 0 4px #16A1C3,
              inset 0 0 4px #16A1C3;
          }
        }

        &:disabled {
          opacity: 0.25;
          cursor: not-allowed;

          /* stylelint-disable-next-line no-descending-specificity */
          &::file-selector-button {
            background: linear-gradient(to bottom,
                #ADB1B3,
                #949798);
            text-shadow: 0 1px 2px hsl(0deg 0% 0% / 75%);
            color: hsl(0deg 0% 25%);
          }
        }

        &:focus-visible {
          outline: none;
          box-shadow:
            0 0 4px #16A1C3,
            inset 0 0 4px #16A1C3;
        }
      }
    }

    .popup-radio-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition-duration: 500ms;
      padding: 0.5rem 1rem;

      &:not(:first-child) {
        border-block-start: 1px solid hsl(0deg 0% 100% / 15%);
        /* box-shadow: 0 -1px 0 hsl(0deg 0% 100% / 15%); */
      }

      &:hover {
        transition-duration: 50ms;
        background: #0E628C;
        cursor: pointer;

        input[type="radio"] {
          outline: 2px solid #0778A9;

          &:checked {
            background: radial-gradient(hsl(96deg 86% 43% / 25%) 40%,
                hsl(0deg 0% 0% / 25%) 45%,
                transparent 50%)
          }
        }
      }

      .multi-line-label {
        display: flex;
        flex-direction: column;

        .radio-option-subtitle {
          color: hsl(0deg 0% 100% / 80%);
          font-size: 0.8rem;
        }
      }

      /* stylelint-disable-next-line no-descending-specificity */
      input[type="radio"] {
        appearance: none;
        position: relative;
        margin: 0 0 0 2rem;
        outline: 2px solid #646B72;
        border: none;
        border-radius: 50%;
        background: none;
        cursor: pointer;
        padding: 0;
        block-size: 23px;
        inline-size: 23px;

        &:checked {
          background: radial-gradient(#5BCE0F 40%,
              hsl(0deg 0% 0% / 99%) 45%,
              transparent 50%)
        }
      }
    }
  }

  .popup-buttons {
    display: flex;
    background: #9C9A9C;
    padding: 2px;

    button {
      flex: 1;
      margin: 2px;
      border: 1px solid #5A5A5A;
      border-radius: 2px;
      background: linear-gradient(to bottom,
          #F2F4F6,
          #BDBDBD);
      cursor: pointer;
      padding: 0.9ch 0;
      color: black;
      font-weight: bold;

      &:hover {
        background: linear-gradient(to bottom,
            #044E70,
            #0E618B);
        color: white;
      }

      &:focus-visible {
        outline: none;
        box-shadow:
          0 0 4px #16A1C3,
          inset 0 0 4px #16A1C3;
      }
    }
  }
}