@import "../variables/variables";
@import "../mixins/private/button-mixins";
@import "../mixins/private/token-mixins";

.list {
    max-width: 480px;
}

.list ul,
.list ol {
    margin: 0;
    padding: 0;
}

.list li::marker {
    content: "";
    font-size: 0;
}

.list li > *,
.list fieldset > * {
    @include background-color-token(
        list-background-color,
        color-background-primary
    );

    align-items: center;
    box-sizing: border-box;
    color: var(--color-foreground-on-primary);
    display: inline-flex;
    font-size: var(--font-size-16);
    margin-block: 1px;
    min-height: var(--spacing-600);
    padding: var(--spacing-150) var(--spacing-200);
    width: 100%;
}

.list__leading {
    margin-inline-end: var(--spacing-200);
}

.list__trailing {
    margin-inline-start: var(--spacing-200);
}

.list__body {
    flex: 1;
}

.list ol li {
    counter-increment: item;
}

.list ol li > *::before {
    content: counter(item) ".";
    margin-inline-end: var(--spacing-200);
    width: var(--spacing-300);
}

.list li > a,
.list li > button {
    border: none;
    text-align: left;
    text-decoration: none;
}

.list li > a,
.list li > button {
    &:hover,
    &:focus {
        @include background-color-token(
            list-background-hover-color,
            color-state-primary-hover
        );

        color: var(--color-foreground-on-primary);
    }
}

.list li > button,
.list li > a {
    &:active {
        @include background-color-token(
            list-background-hover-color,
            color-state-primary-hover
        );
    }
}

.list hr {
    border: 0;
    border-top: 1px solid var(--color-stroke-subtle);
    height: 1px;
    margin-inline: var(--spacing-200);
    padding: 0;
}

[dir="rtl"] {
    .list li > a,
    .list li > button {
        text-align: right;
    }
}
