.sc-datetimepicker {
  &__datepicker {
    flex-basis: 132px;
    flex-shrink: 0;
  }

  &__timepicker {
    flex-basis: 88px;
    flex-shrink: 0;
  }

  sc-input[ng-reflect-required="true"] {
    &.sc-datetimepicker__timepicker {
      flex-basis: 64px;
    }
  }

  //? remove icon/dropdown from timepicker in chrome
  input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
  }

  input[type="time"]::-webkit-clear-button {
    display: block;
  }

  &.--shrink-0 {
    .sc-datetimepicker__datepicker,
    .sc-datetimepicker__timepicker {
      flex-grow: 0;
    }
  }

  &.--wrap {
    .sc-datetimepicker {
      &__datepicker {
        .mat-form-field-outline .mat-form-field-outline-start {
          border-radius: 8px 0 0 0 !important;
          border-bottom: 0 !important;
        }

        .mat-form-field-outline .mat-form-field-outline-end {
          border-radius: 0 8px 0 0 !important;
          border-bottom: 0 !important;
        }

        .mat-form-field-outline-gap {
          border-bottom: 0 !important;
        }
      }

      &__timepicker {
        .mat-form-field-appearance-outline .mat-form-field-wrapper {
          margin: 0 !important;
        }
        .mat-form-field-appearance-outline
          .mat-form-field-wrapper
          .mat-form-field-outline
          .mat-form-field-outline-start {
          border-radius: 0 0 0 8px !important;
          // border-top: 0 !important;
        }

        .mat-form-field-outline .mat-form-field-outline-end {
          border-radius: 0 0 8px 0 !important;
          // border-top: 0 !important;
        }
      }
    }
  }
}