@layer components {

    .code {
        display: grid;
        gap: var(--s-2);
        padding-top: var(--s-4);
        border-top: 1px solid var(--c-line);
    }

    .code__label {
        font-size: var(--t-sm);
        font-weight: 500;
    }

    .code__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-2);
    }

    .code__input {
        width: 100%;
        min-height: 48px;
        padding: 0 var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-1);
        background: var(--c-page);
        font-size: var(--t-base);
        text-transform: uppercase;
        transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
    }

    .code__input::placeholder {
        text-transform: none;
    }

    .code__input:hover {
        border-color: var(--c-ink);
    }

    .code__input:focus {
        border-color: var(--c-ink);
        box-shadow: inset 0 0 0 1px var(--c-ink);
        outline: none;
    }

    .code__input[aria-invalid="true"] {
        border-color: var(--c-warn);
        box-shadow: inset 0 0 0 1px var(--c-warn);
    }

    .code__btn {
        padding-inline: var(--s-5);
    }

    .code__applied {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        font-size: var(--t-sm);
    }

    .code__name {
        padding: 5px 10px;
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-pill);
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: .08em;
    }

    .code__status {
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .code__status:empty {
        display: none;
    }

}