.Character.DialogContent {
  min-width: 480px;

  @include breakpoint(phone) {
    min-width: inherit;
  }

  .mods {
    display: flex;
    flex-direction: column;
    gap: $unit-4x;

    section {
      display: flex;
      flex-direction: column;
      gap: $unit-half;

      &.inline {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;

        h3 {
          margin: 0;
        }
      }

      h3 {
        color: $grey-55;
        font-size: $font-small;
        margin-bottom: $unit;
      }

      select {
        background-color: $grey-90;
      }
    }

    .Button {
      font-size: $font-regular;
      padding: ($unit * 1.5) ($unit-2x);
      width: 100%;

      &.btn-disabled {
        background: $grey-90;
        color: $grey-70;
        cursor: not-allowed;
      }
    }
  }
}