@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/transitions';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-search {
  display: flex;
  position: relative;
  align-items: center;
  inline-size: 100%;
}

/* Default */
.vtmn-search > input[type='search'],
.vtmn-search_variant--default > input[type='search'] {
  block-size: rem(48px);
  box-shadow: inset 0 0 0 rem(1px) var(--vtmn-semantic-color_border-inactive);
  background-color: var(--vtmn-semantic-color_background-primary);
  border-radius: var(--vtmn-radius_100);
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  font-weight: var(--vtmn-typo_text-2-line-height);
  padding-block: rem(12px);
  padding-inline-start: rem(12px);
  padding-inline-end: rem(12px);
  color: var(--vtmn-semantic-color_content-primary);
  outline: none;
  appearance: none;
  inline-size: 100%;
  border: 0;
  transition: var(--vtmn-transition_focus-visible);
  outline-offset: -2px;
}

/* Remove default search input appearance */
.vtmn-search > input[type='search']::-webkit-search-decoration,
.vtmn-search > input[type='search']::-webkit-search-cancel-button,
.vtmn-search > input[type='search']::-webkit-search-results-button,
.vtmn-search > input[type='search']::-webkit-search-results-decoration {
  appearance: none;
}

.vtmn-search > input[type='search']:not(:disabled, :focus):hover,
.vtmn-search_variant--default
  > input[type='search']:not(:disabled, :focus):hover {
  box-shadow: inset 0 0 0 rem(1px) var(--vtmn-semantic-color_border-inactive),
    0 0 0 rem(3px) var(--vtmn-semantic-color_hover-primary);
}

.vtmn-search > input[type='search']:not(:disabled):focus-visible {
  box-shadow: inset 0 0 0 rem(2px) var(--vtmn-semantic-color_border-active);
}

.vtmn-search > input[type='search']:not(:disabled):focus {
  box-shadow: inset 0 0 0 rem(2px) var(--vtmn-semantic-color_border-active);
}

.vtmn-search > input[type='search']::placeholder {
  color: var(--vtmn-semantic-color_content-tertiary);
}

.vtmn-search > input[type='search']:disabled,
.vtmn-search
  > input[type='search']:disabled
  + .vtmn-search_buttons
  > .vtmn-btn {
  opacity: var(--vtmn-opacity_disabled-state);
  cursor: not-allowed;
}

.vtmn-search_buttons {
  display: flex;
  flex-direction: row;
  position: absolute;
  inset-inline-end: 0;
  text-align: end;
  padding-inline-end: rem(2px);
  margin-inline-end: rem(2px);
  padding-inline-start: rem(2px);
  margin-inline-start: rem(2px);
  background-color: var(--vtmn-semantic-color_background-primary);
}

.vtmn-search_buttons > .vtmn-btn {
  min-block-size: rem(36px);
  min-inline-size: rem(36px);
  block-size: rem(36px);
  inline-size: rem(36px);
  border-radius: 50%;
}

.vtmn-search_buttons > .vtmn-btn > span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
}

.vtmn-search_buttons > .vtmn-btn > span.vtmx-close-line {
  color: var(--vtmn-semantic-color_content-tertiary) !important;
}

/* Sizes */

/* SMALL */
.vtmn-search_size--small > input[type='search'] {
  block-size: rem(32px);
  font-size: var(--vtmn-typo_text-3-font-size);
  padding-block: rem(12px);
  padding-inline-start: rem(12px);
  padding-inline-end: rem(12px);
}

.vtmn-search_size--small > .vtmn-search_buttons > .vtmn-btn {
  min-block-size: rem(24px);
  min-inline-size: rem(24px);
  block-size: rem(24px);
  inline-size: rem(24px);
}

.vtmn-search_size--small
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_text-2-font-size);
}

/* MEDIUM */
.vtmn-search_size--medium > input[type='search'] {
  block-size: rem(48px);
  font-size: var(--vtmn-typo_text-2-font-size);
  padding-block: rem(12px);
  padding-inline-start: rem(12px);
  padding-inline-end: rem(12px);
}

.vtmn-search_size--medium > .vtmn-search_buttons > .vtmn-btn {
  min-block-size: rem(36px);
  min-inline-size: rem(36px);
  block-size: rem(36px);
  inline-size: rem(36px);
}

.vtmn-search_size--medium
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
}

/* Variants */

/* PERSISTENT */
.vtmn-search_variant--persistent > input[type='search'] {
  box-shadow: none;
  background-color: var(--vtmn-semantic-color_background-secondary);
}

.vtmn-search_variant--persistent
  > input[type='search']:not(:disabled, :focus):hover {
  box-shadow: 0 0 0 rem(3px) var(--vtmn-semantic-color_hover-primary);
}

.vtmn-search_variant--persistent > input[type='search']::placeholder {
  color: var(--vtmn-semantic-color_content-secondary);
}

.vtmn-search_variant--persistent > .vtmn-search_buttons {
  background-color: var(--vtmn-semantic-color_background-secondary);
}

/* ON CONTENT */
.vtmn-search_variant--on-content > input[type='search'] {
  box-shadow: var(--vtmn-shadow_100);
}

.vtmn-search_variant--on-content
  > input[type='search']:not(:disabled, :focus):hover {
  box-shadow: 0 0 0 rem(3px) var(--vtmn-semantic-color_hover-primary),
    var(--vtmn-shadow_100);
}

.vtmn-search_variant--on-content
  > input[type='search']:not(:disabled):focus-visible {
  box-shadow: inset 0 0 0 rem(2px) var(--vtmn-semantic-color_border-active),
    var(--vtmn-shadow_100);
}

.vtmn-search_variant--on-content > input[type='search']:not(:disabled):focus {
  box-shadow: inset 0 0 0 rem(2px) var(--vtmn-semantic-color_border-active),
    var(--vtmn-shadow_100);
}
