@include export-module('co-input-date-range-layout') {
  .co-input-date-range {
    .inputs-wrapper {
      position: relative;
      display: flex;
      width: 100%;
      border-radius: $cc-input-border-radius;
      &:before {
        content: '';
        box-shadow: inset 0 0 0 $cc-input-border-width $cc-input-border-color;
        border-radius: $cc-input-border-radius;
        position: absolute;
        pointer-events: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      &:hover {
        @include hover($cc-input-border-hover-style, $cc-input-border-hover-width, $cc-input-border-hover-color, $cc-input-border-radius);
      }
      &:focus-within {
        @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-input-border-radius);
      }
      .co-input-text {
        width: inherit;
        height: calc(#{$cc-item-size} - 2px);
        border: none;
        &:before {
          box-shadow: none;
        }
        &:hover {
          border: none;
          &:before {
            box-shadow: none;
          }
        }
        &:focus {
          border: none;
          &:before {
            box-shadow: none;
          }
        }
      }

      .co-input-text:first-child {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        label {
          white-space: nowrap;
          overflow: visible;
        }
      }
      .co-input-text:nth-child(2) {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}
