.button {
  // display: flex;
  // flex-flow: row nowrap;
  // gap: 0.5em;
  // justify-content: center;
  // align-items: center;
  // min-width: 6em;
  color: hsl(0, 0%, 100%);
  border: transparent;
  background: transparent;
  font-weight: bold;
  text-shadow:
    hsl(0, 0%, 0%) 0px 0px 3px,
    hsl(0, 0%, 0%) -1px -1px 0px,
    hsl(0, 0%, 0%) 1px 1px 0px;
}

.disabled {
  color: grey;
}

.modal {
  color: var(--colour0-primary);
  background-color: var(--colour1-primary);
  padding: 0;
  font-size: 80%;

  form {
    div {
      width: 100%;
    }

    label {
      display: block;
      width: 100%;
      padding: 2px;
    }

    input[type="radio"] {
      display: none;
    }

    input[type="radio"] ~ label:hover {
      background-color: var(--colour0-tertirary);
    }

    input[type="radio"]:checked ~ label {
      background-color: var(--anchour-internal-colour2-primary);
    }

    section {
      &:first-child {
        div:not(:last-child) {
          border-bottom: 1px solid var(--colour0-tertirary);
        }
      }

      &:last-child div label {
        color: var(--colour0-secondary);
      }
    }
  }

  @media only screen and (max-width: 720px) {
    @media (max-width: 400px) {
      width: 90vw;
    }

    height: 60vh;

    form {
      height: 100%;
      display: flex;
      flex-direction: column;

      section {
        &:first-child {
          margin-bottom: 0.25em;
          border-bottom: 1px solid var(--colour0-tertirary);

          div:not(:last-child) {
            border-bottom: 1px solid var(--colour0-tertirary);
          }
        }

        &:last-child {
          display: inline-flex;
          flex-direction: column;
          flex-grow: 1;

          div {
            // &:not(:last-child)
            &:first-child {
              height: 100%;

              label {
                cursor: default;
                position: relative;
                top: 50%;
                transform: translateY(-50%);
              }
            }

            &:last-child {
              flex-basis: 0;

              button {
                width: 50%;
              }
            }
          }
        }
      }
    }
  }

  @media only screen and (min-width: 721px) {
    @media (max-width: 1200px) {
      width: 50vw;
    }
    @media (max-width: 1600px) {
      width: 40vw;
    }
    @media (min-width: 1600px) {
      width: 30vw;
    }

    form {
      display: flex;

      section {
        &:first-child {
          // Reason selection box
          padding-right: 0.5em;
          width: max(30%, 10em);

          div {
            > label {
              padding-left: 4px;
            }
            &:first-child > label {
              padding-top: 4px;
            }
            &:last-child > label{
              padding-bottom: 4px;
            }
          }
        }

        &:last-child {
          // Details/submit
          display: flex;
          flex-direction: column;
          width: 70%;
          margin-right: 2px;

          :first-child {
            // Detailed reason box
            flex-grow: 1;
            top: 5vh;

            label {
              cursor: default;
              position: relative;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          :last-child {
            // Buttons' container div
            text-align: center;
            margin-bottom: 0.25em;

            :first-child {
              margin-right: 0.25em;
            }
          }
        }
      }
    }
  }
}
