@import "../shared/styles/lib";

.generator {
  > div {
    padding: 20px;

    > h2 {
      @include font-in-content-body-default;
      color: $color-text-primary;

      margin-bottom: 10px;
    }

    > input {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;

      @include font-in-content-title-default;
      color: inherit;

      font-variant-numeric: slashed-zero;
      text-align: center;
      letter-spacing: 2px;

      background-color: rgba($color-background-2, 0.3);
      border: 1px solid $color-background-2;
      border-radius: 5px;
      outline: none;
    }

    > div {
      display: flex;
      gap: 20px;
      margin-top: 20px;

      > button {
        flex: 1;
        height: 30px;

        background-color: $color-background-2;
        border: none;
        border-radius: 3px;

        text-align: center;
        cursor: pointer;

        @include font-in-content-body-small-bold;
        color: $color-text-primary;

        &:first-child {
          background-color: $color-accent-primary;
          color: $color-button-primary;
        }
      }
    }
  }
}
