@layer components {
    table {
        width: 100%;
        border: solid var(--size--border) var(--color--border);
        border-collapse: collapse;

        font-family: var(--font--input--family--medium);
        font-size: var(--font--input--size--medium);
        font-weight: var(--font--input--weight--medium);
        line-height: var(--font--input--line-height--medium);
        letter-spacing: var(--font--input--letter-spacing--medium);
        text-transform: var(--font--input--casing--medium);

        & th, & td {
            border: solid var(--size--border) var(--color--border);
            background-color: var(--color--brand--white);
            overflow-wrap: break-word;
            hyphens: auto;
            padding: var(--space-xs);
        }

        & th {
            background-color: var(--color--brand--85);
            text-align: left;

            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
            text-transform: var(--font--title--casing--xsmall);
        }

        & a {
            border-bottom: solid var(--size--border) var(--color--border);
            text-decoration: none;
        }

        & caption {
            text-align: left;
            margin-bottom: var(--space-2xs);

            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
            text-transform: var(--font--title--casing--xsmall);
        }
    }
}