@include export-module('cc-input-number-picker-layout') {
  .co-input-number-picker {
    position: relative;
    font-family: $cc-co-input-number-picker-font-family;
    font-size: $cc-co-input-number-picker-font-size;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: $cc-co-input-number-picker-height;
    //width: fit-content;
    //border: $cc-co-input-number-picker-border;
    border-radius: $cc-co-input-number-picker-border-radius;
    &:before {
      content: '';
      box-shadow: inset 0 0 0 $cc-input-border-width $cc-input-border-color;
      border-radius: $cc-co-input-number-picker-border-radius;
      position: absolute;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .icon-wrapper {
      display: flex;
      height: 100%;
      flex-shrink: 0;
      align-items: center;
      .input-number-picker-icon {
        cursor: pointer;
        height: 100%;
        width: auto;
        aspect-ratio: 1;
        max-height: $cc-co-input-number-picker-icon-max-height;
        svg {
          height: $cc-co-input-number-picker-icon-size;
          width: $cc-co-input-number-picker-icon-size;
        }
      }
      .spacer {
        height: 100%;
        width: $cc-co-input-number-picker-spacer-width;
        padding: $cc-co-input-number-picker-spacer-padding;
        margin: $cc-co-input-number-picker-spacer-margin;
        background-color: $cc-co-input-number-picker-spacer-color;
      }
    }
    .button-wrapper {
      padding: $cc-co-input-number-picker-button-padding;
      height: 100%;
      aspect-ratio: 1/1;
    }
    .input-wrapper {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;
      overflow: hidden;
    }
    .permanent-label {
      color: $cc-color-label;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    input {
      font-family: $cc-co-input-number-picker-font-family;
      padding: 0;
      width: 100%;
      border: none;
      text-align: $cc-co-input-number-picker-text-align;
      &:focus {
        outline: none;
      }
      &:read-only {
        opacity: $cc-co-input-number-picker-readonly-opacity;
      }
    }
    .co-button {
      height: 100%;
      border-radius: $cc-co-input-number-picker-button-radius;
      justify-content: center;
      padding: 0;
      > co-icon {
        height: $cc-co-input-number-picker-button-icon-height;
        width: $cc-co-input-number-picker-button-icon-width;
      }
    }
    span, span.e-input-focus {
      border: none !important;
    }
    @if $cc-input-show-focus-line != false {
      &.cc-input-focused:not(.no-focus-line) {
        @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-co-input-number-picker-border-radius);
      }
    }
    &:hover {
      @include hover($cc-input-border-hover-style, $cc-input-border-hover-width, $cc-input-border-hover-color, $cc-input-border-radius);
    }
    .plus-operator {
      border-radius: 0 $cc-co-input-number-picker-border-radius $cc-co-input-number-picker-border-radius 0;
    }
    &:not(.has-icon) {
      .minus-operator {
        border-radius: $cc-co-input-number-picker-border-radius 0 0 $cc-co-input-number-picker-border-radius;
      }
    }
  }
}

