calcite-input.scss

// scales
:host([scale="s"]) {
  & input,
  & .prefix,
  & .suffix {
    @apply text--2h p-2 h-6;
  }
  & textarea {
    @apply h-6;
    min-height: theme("spacing.6");
  }
  & .number-button-wrapper,
  & .action-wrapper calcite-button,
  & .action-wrapper calcite-button button {
    @apply h-6;
  }
  & input[type="file"] {
    @apply h-6;
  }
  & .clear-button {
    min-height: theme("spacing.6");
    min-width: theme("spacing.6");
  }
  & textarea {
    @apply text--2h
    py-1
    px-2
    h-auto;
  }
}

:host([scale="m"]) {
  & input,
  & .prefix,
  & .suffix {
    @apply text--1h p-3 h-8;
  }
  & textarea {
    min-height: theme("spacing.8");
  }
  & .number-button-wrapper,
  & .action-wrapper calcite-button,
  & .action-wrapper calcite-button button {
    @apply h-8;
  }
  & input[type="file"] {
    @apply h-8;
  }
  & .clear-button {
    min-height: theme("spacing.8");
    min-width: theme("spacing.8");
  }
  & textarea {
    @apply text--1h
      py-2
      px-3
      h-auto;
  }
}

:host([scale="l"]) {
  & input,
  & .prefix,
  & .suffix {
    @apply text-0h p-4 h-11;
  }
  & textarea {
    min-height: theme("spacing.11");
  }
  & .number-button-wrapper,
  & .action-wrapper calcite-button,
  & .action-wrapper calcite-button button {
    @apply h-11;
  }
  & input[type="file"] {
    @apply h-11;
  }
  & .clear-button {
    min-height: theme("spacing.11");
    min-width: theme("spacing.11");
  }
  & textarea {
    @apply text-0h
      py-3
      px-4
      h-auto;
  }
}

// disabled styles
:host([disabled]) {
  @apply pointer-events-none opacity-disabled;

  & .wrapper {
    @apply pointer-events-none text-opacity-disabled;
  }
  & button,
  & textarea,
  & input {
    @apply pointer-events-none;
  }
  & textarea {
    resize: none;
  }
}

:host textarea,
:host input {
  transition: $transition, height 0s;
  -webkit-appearance: none;
  @apply w-full
    rounded-none
    relative
    max-h-full
    max-w-full
    m-0
    font-normal
    font-inherit
    flex-1
    flex
    text-color-1
    box-border
    bg-foreground-1;
}

:host input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

// states
:host {
  & input,
  & textarea {
    @apply text-color-1
      border
      border-solid
      border-color-input;
    &::placeholder,
    &:-ms-input-placeholder,
    &::-ms-input-placeholder {
      @apply text-color-3 font-normal;
    }
  }
  & input:focus,
  & textarea:focus {
    @apply border-color-brand text-color-1;
  }
  & input[readonly],
  & textarea[readonly] {
    @apply bg-background font-medium;
  }
  & input[readonly]:focus,
  & textarea[readonly]:focus {
    @apply text-color-1;
  }
  & calcite-icon {
    @apply text-color-3;
  }
}

//focus
:host textarea,
:host input {
  @apply focus-base;
}
:host textarea:focus,
:host input:focus {
  @apply focus-inset;
}

:host([status="invalid"]) {
  & input,
  & textarea {
    @apply border-color-danger;
  }
  & input:focus,
  & textarea:focus {
    @apply focus-inset-danger;
  }
}

// ICONS

// position icons

:host([scale="s"]) .icon {
  inset-inline-start: theme("spacing.2");
}

:host([scale="m"]) .icon {
  inset-inline-start: theme("spacing.3");
}

:host([scale="l"]) .icon {
  inset-inline-start: theme("spacing.4");
}

// position placeholder/value text in relation to icons

:host([icon][scale="s"]) input {
  padding-inline-start: theme("padding.8");
}

:host([icon][scale="m"]) input {
  padding-inline-start: theme("padding.10");
}

:host([icon][scale="l"]) input {
  padding-inline-start: theme("padding.12");
}

// positioning wrapper for icon and loader

.element-wrapper {
  @apply inline-flex
    items-center
    flex-1
    relative
    order-3;
}

.icon {
  @apply block
    absolute
    pointer-events-none
    z-10
    transition-default;
}

// hide browser default clear

input[type="text"]::-ms-clear,
input[type="text"]::-ms-reveal {
  @apply hidden
    w-0
    h-0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button {
  @apply hidden;
}

.clear-button {
  pointer-events: initial;
  @apply focus-base
    flex
    self-stretch
    items-center
    justify-center
    box-border
    cursor-pointer
    min-h-full
    border
    border-solid
    border-color-input
    bg-foreground-1
    order-4
    m-0;

  border-inline-start-width: theme("borderWidth.0");

  &:hover {
    @apply bg-foreground-2 transition-default;
    calcite-icon {
      @apply text-color-1 transition-default;
    }
  }
  &:active {
    @apply bg-foreground-3;
    calcite-icon {
      @apply text-color-1;
    }
  }
  &:focus {
    @apply focus-inset;
  }
  &:disabled {
    @apply opacity-disabled;
  }
}

// loading
.loader {
  top: 1px;
  left: 1px;
  right: 1px;
  @apply block
    pointer-events-none
    absolute;
}

// slotted action
.action-wrapper {
  @apply flex order-7;
}

// prefix and suffix
.prefix,
.suffix {
  @apply flex
    items-center
    content-center
    h-auto
    min-h-full
    select-none
    box-border
    font-medium
    border
    border-solid
    border-color-input
    bg-background
    text-color-2
    leading-none
    break-words;
}

.prefix {
  @apply order-2;
  border-inline-end-width: theme("borderWidth.0");
}
.suffix {
  @apply order-5;
  border-inline-start-width: theme("borderWidth.0");
}

// alignment type
:host([alignment="start"]) {
  & textarea,
  & input {
    text-align: start;
  }
}

:host([alignment="end"]) {
  & textarea,
  & input {
    text-align: end;
  }
}

// number buttons
:host input[type="number"] {
  -moz-appearance: textfield;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    @apply m-0;
  }
}

.number-button-wrapper {
  @apply box-border
    flex
    flex-col
    pointer-events-none
    order-6
    transition-default;
}

:host([number-button-type="vertical"]) .wrapper {
  flex-direction: row;
  display: flex;
}

:host([number-button-type="vertical"]) {
  & input,
  textarea {
    @apply order-2;
  }
}

:host([number-button-type="horizontal"]) .calcite--rtl {
  & .number-button-item[data-adjustment="down"] calcite-icon {
    transform: rotate(-90deg);
  }
  & .number-button-item[data-adjustment="up"] calcite-icon {
    transform: rotate(-90deg);
  }
}

.number-button-item.number-button-item--horizontal {
  &[data-adjustment="down"],
  &[data-adjustment="up"] {
    @apply min-h-full
      max-h-full
      order-1
      self-stretch;
    & calcite-icon {
      transform: rotate(90deg);
    }
  }
}

.number-button-item.number-button-item--horizontal[data-adjustment="down"] {
  @apply border
    border-solid
    border-color-input;
  border-inline-end-width: theme("borderWidth.0");
  &:hover {
    @apply bg-foreground-2;
    calcite-icon {
      @apply text-color-1;
    }
  }
}

.number-button-item.number-button-item--horizontal[data-adjustment="up"] {
  @apply order-5;
  &:hover {
    @apply bg-foreground-2;
    calcite-icon {
      @apply text-color-1;
    }
  }
}

:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"]:hover {
  @apply bg-foreground-2;
  calcite-icon {
    @apply text-color-1;
  }
}

:host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"]:hover {
  @apply bg-foreground-2;
  calcite-icon {
    @apply text-color-1;
  }
}

:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] {
  @apply border-t-0;
}

.number-button-item {
  max-height: 50%;
  min-height: 50%;
  pointer-events: initial;
  @apply flex
    self-center
    items-center
    box-border
    cursor-pointer
    py-0
    px-2
    border
    border-solid
    border-color-input
    bg-foreground-1
    transition-default
    m-0;
  border-inline-start-width: theme("borderWidth.0");
  & calcite-icon {
    @apply pointer-events-none transition-default;
  }
  &:focus {
    @apply bg-foreground-2;
    calcite-icon {
      @apply text-color-1;
    }
  }
  &:active {
    @apply bg-foreground-3;
  }
}

.wrapper {
  @apply flex
    flex-row
    items-center
    relative;
}

// hide the default date picker
:host input::-webkit-calendar-picker-indicator {
  @apply hidden;
}

:host input[type="date"]::-webkit-input-placeholder {
  visibility: hidden !important;
}

// textarea resize icon
:host textarea::-webkit-resizer {
  @apply box-border
    absolute
    bottom-0
    py-0
    px-1;
  inset-inline-end: 0;
}

.resize-icon-wrapper {
  bottom: 2px;
  inset-inline-end: 2px;

  @apply bg-foreground-1
    text-color-3
    absolute
    z-10
    pointer-events-none
    w-3
    h-3;

  & calcite-icon {
    bottom: theme("spacing.1");
    inset-inline-end: theme("spacing.1");
    transform: rotate(-45deg);
  }
}

.calcite--rtl {
  .resize-icon-wrapper {
    & calcite-icon {
      transform: rotate(45deg);
    }
  }
}

:host([type="color"]) input {
  @apply p-1;
}

// file input
:host([type="file"]) input {
  @apply bg-foreground-1
    cursor-pointer
    border
    border-dashed
    border-color-input
    text-center;
}

:host([type="file"][scale="s"]) input {
  @apply py-px px-2;
}

:host([type="file"][scale="m"]) input {
  @apply py-1 px-3;
}

:host([type="file"][scale="l"]) input {
  @apply py-2 px-4;
}

:host(.no-bottom-border) input {
  @apply border-b-0;
}

:host(.border-top-color-one) input {
  @apply border-t-color-1;
}

:host .inline-child {
  @apply transition-default bg-transparent;

  .editing-enabled {
    background-color: inherit;
  }
}

:host .inline-child:not(.editing-enabled) {
  @apply flex
    cursor-pointer
    border-color-transparent;
  padding-inline-start: 0;
}

@include hidden-form-input();