@import "./form";

.cobalt- {
  &Stepper {
    @include form-field-container;

    display: inline-block;
    align-items: center;

    width: auto !important;

    font-family: font-family(base);

    &__Wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__ContentWrapper {
      @apply c-text-onSurface c-my-none c-mx-sm;
      display: flex;
      justify-content: center;
      align-items: center;

      min-width: 96px;

      font-size: 32px;
      font-weight: 500;
    }

    &__Meta {
      @apply c-text-onSurfaceVariant c-ml-xs;

      font-size: 15px;
    }

    &__HiddenInput {
      display: none;
    }

    &__ActionButton {
      min-width: 40px;
      min-height: 40px;
      width: 40px;
      height: 40px;
      padding: 0;
      border-width: 1px;

      font-size: 18px;

      @apply c-rounded-lg;
      user-select: none;

      &:focus {
        outline: none;
      }

      &--disabled {
        opacity: 0;
        pointer-events: none;
      }
    }

    &--disabled {
      .cobalt-Stepper__ContentWrapper {
        @apply c-text-onSurfaceVariant;
      }
    }

    &--success {
      .cobalt-Stepper__ContentWrapper {
        @apply c-text-success;
      }
    }

    &--error {
      .cobalt-Stepper__ContentWrapper {
        @apply c-text-error;
      }
    }
  }
}