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

@include utils.layer {
  .Block {
    @include inputs.base();
    @include inputs.sizes();

    background-image: locals.$marker;
    background-repeat: no-repeat;
    background-size: 1em 1em;

    &:not(:disabled) {
      cursor: pointer;
    }

    &--fill {
      width: 100%;
    }

    &--sm {
      $pad: 0.5rem;
      height: 2rem;
      font-size: var(--cmm-font-size-sm);
      padding-left: $pad;
      padding-right: calc($pad + 1em);
      background-position: right calc($pad / 2) center;
    }

    &--md {
      $pad: 0.75rem;
      font-size: var(--cmm-font-size-md);
      height: 2.5rem;
      padding-left: $pad;
      padding-right: calc($pad + 1em);
      background-position: right calc($pad / 2) center;
    }

    &--lg {
      $pad: 1rem;
      font-size: var(--cmm-font-size-md);
      height: 3rem;
      padding-left: $pad;
      padding-right: calc($pad + 1em);
      background-position: right calc($pad / 2) center;
    }
  }
}
