@use "../../styles/inputs";
@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  %sizeDefaults {
    font-size: var(--cmm-font-size-md);
    height: 2.5rem;
    padding-left: locals.$startDecorWidth;
    padding-right: locals.$endDecorWidth;
    margin: locals.$margin;
  }

  .Block {
    @extend %sizeDefaults;
    @include inputs.base();

    &--sm {
      font-size: var(--cmm-font-size-sm);
      height: 2rem;
      padding-left: var(locals.$startDecorWidth_name, 0.5rem);
      padding-right: var(locals.$endDecorWidth_name, 0.5rem);
    }

    &--md {
      @extend %sizeDefaults;
    }

    &--lg {
      font-size: var(--cmm-font-size-md);
      height: 3rem;
      padding-left: var(locals.$startDecorWidth_name, 1rem);
      padding-right: var(locals.$endDecorWidth_name, 1rem);
    }

    &--fill {
      width: 100%;
    }
  }
}
