ciphermask/ui/components/app/srp-input/srp-input.scss

.import-srp {
  &__container {
    display: grid;
    grid-template-areas:
      "title dropdown"
      "paste-tip paste-tip"
      "input input"
      "error error"
      "too-many-words-error too-many-words-error";
  }

  @media (max-width: 767px) {
    &__container {
      grid-template-areas: "title" "dropdown" "input" "error";
    }
  }

  &__srp-label {
    grid-area: title;
  }

  &__number-of-words-dropdown {
    grid-area: dropdown;
  }

  &__paste-tip {
    margin-bottom: 8px;
    grid-area: paste-tip;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  &__srp {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-area: input;
  }

  @media (max-width: 767px) {
    &__srp {
      grid-template-columns: 1fr;
    }
  }

  &__srp-word {
    display: flex;
    align-items: center;
    margin: 8px;
  }

  &__srp-word-label {
    width: 2em;
  }

  &__srp-error {
    margin-top: 4px;
    grid-area: error;
  }

  &__srp-too-many-words-error {
    margin-top: 4px;
    grid-area: too-many-words-error;
  }
}