/* ================================================
   Nav Disabled Links
   ================================================ */

.nav--disabled {
    position: relative;
    cursor: not-allowed;
    opacity: 0.5;
}

.nav--disabled:hover::after {
    display: block;
}


/* ================================================
   LABEL
   ================================================ */

.label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-80);
}

.label__required {
    position: absolute;
    left: calc(-.60 * var(--space-120));
    top: 0;
    color: var(--text-error-default);
}

.label__icon {
    height: var(--space-200);
    width: auto;
    cursor: pointer;
    fill: var(--icons-information-default);
}

.label__icon:hover {
    fill: var(--icons-information-hover);
}

.label__optional  {
    color: var(--text-default-placeholder);
}


/* ================================================
   TOOLTIP
   ================================================ */

.tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip__content {
    display: none;
    position: absolute;
    bottom: calc(100% + var(--space-80));
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--surface-information-on-color);
    border-radius: var(--border-radius-2xl);
    padding: var(--space-120) var(--space-160);
    white-space: nowrap;
    box-shadow: 0 var(--space-40) var(--space-100) rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.tooltip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--border-width-lg);
    border-style: solid;
    border-color: var(--surface-information-on-color) transparent transparent transparent;
}

.tooltip__title {
    color: var(--text-default-subheading);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-40);
}


.tooltip:hover .tooltip__content {
    display: block;
}

/* Tooltip below modifier */
.tooltip--below .tooltip__content {
    bottom: auto;
    top: calc(100% + var(--space-80));
}

.tooltip--below .tooltip__content::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--surface-information-on-color) transparent;
}

/* ================================================
   FIELD
   ================================================ */

.field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-100);
    height: var(--space-440);
    padding: var(--space-40) var(--space-160);
    border-radius: var(--border-radius-2xl);
    border: var(--border-width-sm) solid var(--borders-default-default);
    background-color: var(--surface-neutral-default);
    width: 100%;
}

/* Focus - empty, grey ring */
.field:has(input:focus) {
    border-color: var(--borders-default-default);
    outline: var(--border-width-md) solid var(--borders-default-focus);
    outline-offset: var(--space-20);
}

/* Focus - typing, blue ring */
.field.field--typing:has(input:focus) {
    outline-color: var(--borders-primary-focus);
}

/* Error */
.field--error {
    border-color: var(--borders-error-default);
    background-color: var(--surface-error-on-color);
}

.field--error input,
.field--error input::placeholder {
    color: var(--text-error-default) !important;
}

.field--error .field__icon-left svg,
.field--error .field__icon-right svg {
    fill: var(--icons-error-default);
}

/* Error hover */
.field--error:hover {
    border-color: var(--borders-error-hover);
}

.field--error:hover input,
.field--error:hover input::placeholder {
    color: var(--text-error-hover) !important;
}

.field--error:hover .field__icon-left svg,
.field--error:hover .field__icon-right svg {
    fill: var(--icons-error-hover);
}

/* Error focus */
.field--error:has(input:focus),
.field--error.field--typing:has(input:focus) {
    background-color: var(--surface-neutral-default);
    border-color: var(--borders-error-default);
    outline: var(--border-width-md) solid var(--borders-error-focus);
    outline-offset: var(--space-20);
}

/* Success */
.field--success {
    border-color: var(--borders-success-default);
    background-color: var(--surface-success-on-color);
}

.field--success input,
.field--success input::placeholder {
    color: var(--text-success-default) !important;
}

.field--success .field__icon-left svg,
.field--success .field__icon-right svg {
    fill: var(--icons-success-default);
}

/* Success hover */
.field--success:hover {
    border-color: var(--borders-success-hover);
}

.field--success:hover input,
.field--success:hover input::placeholder {
    color: var(--text-success-hover) !important;
}

.field--success:hover .field__icon-left svg,
.field--success:hover .field__icon-right svg {
    fill: var(--icons-success-hover);
}

/* Success focus */
.field--success:has(input:focus),
.field--success.field--typing:has(input:focus) {
    background-color: var(--surface-neutral-default);
    border-color: var(--borders-success-default);
    outline: var(--border-width-md) solid var(--borders-success-focus);
    outline-offset: var(--space-20);
}

/* Disabled */
.field--disabled {
    border-color: var(--borders-disabled-default);
    opacity: 0.5;
    cursor: not-allowed;
}

.field--disabled .field__icon-left svg,
.field--disabled .field__icon-right svg {
    fill: var(--icons-disabled-default);
}

/* Input */
.field input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
}

.field input::placeholder {
    color: var(--text-default-placeholder);
}

.field input:focus::placeholder {
    color: var(--text-default-body);
}

/* Icons */
.field__icon-left svg,
.field__icon-right svg {
    fill: currentColor;
    width: var(--space-160);
    height: var(--space-160);
}

/* Hover - default, comes last so error/success override it */
.field:not(.field--error):not(.field--success):hover {
    border-color: var(--borders-default-hover);
}

.field:not(.field--error):not(.field--success):hover input,
.field:not(.field--error):not(.field--success):hover input::placeholder {
    color: var(--text-default-hover);
}

.field:not(.field--error):not(.field--success):hover .field__icon-left svg,
.field:not(.field--error):not(.field--success):hover .field__icon-right svg {
    fill: var(--icons-default-hover);
}

/* ================================================
   BUTTON
   ================================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-80);
    height: var(--space-440);
    padding: var(--space-40) var(--space-160);
    border-radius: var(--border-radius-2xl);
    border: var(--border-width-sm) solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Focus - applies to all variants */
.button:focus,
.button:focus-visible {
    outline: var(--border-width-md) solid var(--borders-primary-focus);
    outline-offset: var(--space-20);
}

/* Disabled - applies to all variants */
.button:disabled {
    pointer-events: none;
    cursor: not-allowed;
}

.button:disabled .button__icon-left svg,
.button:disabled .button__icon-right svg {
    fill: var(--icons-disabled-default);
}

/* Primary */
.button--primary {
    background-color: var(--surface-primary-default);
    color: var(--text-neutral-heading);
}

.button--primary:hover {
    background-color: var(--surface-primary-hover);
}

.button--primary:disabled {
    background-color: var(--surface-disabled-default);
    color: var(--text-disabled-default);
    border-color: var(--borders-disabled-focus);
}

/* Transparent */
.button--transparent {
    background-color: transparent;
    color: var(--text-primary-default);
}

.button--transparent:hover {
    background-color: var(--surface-primary-on-color);
    color: var(--text-primary-hover);
}

.button--transparent:disabled {
    color: var(--text-disabled-default);
}

/* Outlined */
.button--outlined {
    background-color: transparent;
    color: var(--text-primary-default);
    border-color: var(--borders-primary-default);
}

.button--outlined:hover {
    background-color: var(--surface-primary-on-color);
    color: var(--text-primary-hover);
    border-color: var(--borders-primary-hover);
}

.button--outlined:disabled {
    color: var(--text-disabled-default);
    border-color: var(--borders-disabled-default);
}

/* Icons */
.button__icon-left svg,
.button__icon-right svg {
    fill: currentColor;
    width: var(--space-160);
    height: var(--space-160);
}