.container {
  &.request-access {
    --color: var(--orange);

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4rem;

    .wrapper {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 80%;
      padding: 3rem 2.625rem;
      overflow: hidden;
      gap: 1.5rem;
      border: 0.125rem solid var(--background-color-tertiary);
      border-radius: 1.125rem;
      background-color: var(--background-color-secondary);

      h1 {
        width: 100%;
        padding: 0 0.375rem;
        border-top: 0.0625rem dashed hsl(0, 0%, 16%);
        border-bottom: 0.0625rem dashed hsl(0, 0%, 16%);
        text-align: center;
      }

      .tip {
        display: block;
        position: absolute;
        top: 1.5rem;
        right: clamp(1rem, 5vw, 2.5rem);
        left: auto;
        width: fit-content;
        transform: translate(0, 0.75rem) rotate(-3deg);
        color: var(--orange);
        font-weight: 700;
        font-size: var(--font-size-body);
        letter-spacing: 0.125rem;
        text-transform: uppercase;
      }

      .borders {
        display: flex;
        position: absolute;
        justify-content: space-between;
        inset: 0;
        padding: 0 2.625rem;
        pointer-events: none;

        .top,
        .bottom {
          position: absolute;
          left: 0;
          width: 100%;
          height: 0.0313rem;
        }

        .top {
          top: 3rem;
          border-bottom: 0.0625rem dashed hsl(0, 0%, 16%);
        }

        .bottom {
          bottom: 3rem;
          border-top: 0.0625rem dashed hsl(0, 0%, 16%);
        }

        .left,
        .right {
          width: 0.0313rem;
          height: 100%;
        }

        .left {
          border-right: 0.0625rem dashed hsl(0, 0%, 16%);
        }

        .right {
          border-left: 0.0625rem dashed hsl(0, 0%, 16%);
        }
      }

      .form {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0.75rem 0;
        gap: 1rem;
        border-top: 0.0625rem dashed hsl(0, 0%, 16%);
        border-bottom: 0.0625rem dashed hsl(0, 0%, 16%);

        label {
          padding: 0 0.625rem 0.375rem;
          border-bottom: 0.0625rem dashed hsl(0, 0%, 16%);
        }

        .input-wrapper {
          display: flex;
          align-items: stretch;
          padding: 0 0.625rem;

          input,
          button {
            &:disabled {
              cursor: not-allowed;
            }
          }

          input {
            display: flex;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;
            align-items: center;
            min-width: 0;
            padding: 0.75rem;
            gap: 0.75rem;
            border: 0.125rem solid var(--color);
            border-bottom-width: 0.0625rem;
            border-radius: 0.375rem 0 0 0.375rem;
            background-color: var(--background-color-secondary);
            color: var(--color-display);
            font-size: inherit;
            font-family: inherit;

            &:disabled {
              color: var(--yellow);
            }
          }

          button {
            border: 0.125rem solid var(--color);
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: var(--color);
            color: var(--background-color-primary);
            transition:
              border-color 240ms var(--ease-fluid),
              background-color 240ms var(--ease-fluid),
              color 240ms var(--ease-fluid);

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

            &:disabled {
              &:hover {
                background-color: var(--yellow);
                color: var(--background-color-primary);
              }
            }
          }
        }

        .status-message {
          padding: 0 0.625rem;
          color: var(--color-heading);
          text-align: center;
        }
      }

      .notes {
        width: 100%;
        max-width: 27rem;
        margin: -0.25rem 0 0 0;
        padding: 0.625rem 1.125rem 0.1875rem 0.625rem;
        border-top: 0.0625rem dashed hsl(0, 0%, 16%);
        border-bottom: 0.0625rem dashed hsl(0, 0%, 16%);
        text-wrap: pretty;

        p {
          font-weight: 600;
        }

        ul {
          margin-top: 0.5rem;
          padding: 0 0 0 1.125rem;

          li {
            margin: 0.375rem 0;
          }
        }

        a {
          color: var(--color);
          font-weight: 500;
          text-decoration: underline;
          text-decoration-style: solid;
          text-decoration-color: var(--color);
          text-underline-offset: 0.1875rem;
          transition: color 240ms var(--ease-fluid);

          &:focus,
          &:hover {
            color: var(--color-display);
          }
        }
      }
    }

    @media (max-width: 60rem) {
      .wrapper {
        max-width: 100%;
        padding: 1.5rem 1.125rem;

        .borders {
          padding: 0 1.125rem;

          .top {
            top: 1.5rem;
          }

          .bottom {
            bottom: 1.5rem;
          }
        }
      }
    }
  }
}
