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

/* .filter-group also exists in filter-menu-button */
/* todo: move to utility/layout class and/or mixin */
div.filter-group {
    display: flex;
    flex-wrap: wrap;
}

button.filter-button,
a.filter-link {
    @include filter-button-base();

    @include background-color-token(
        filter-button-background-color,
        color-background-secondary
    );
    @include border-color-token(
        filter-button-selected-border-color,
        color-stroke-default
    );

    &:focus,
    &:hover,
    &:active {
        @include background-color-token(
            filter-button-background-color,
            color-state-secondary-hover
        );
    }
}

button.filter-button .filter-button__cell,
a.filter-link .filter-link__cell {
    display: inline-block;
    max-width: 258px;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.filter-link:visited {
    @include color-token(
        filter-button-foreground-color,
        color-foreground-primary
    );
}

button.filter-button[aria-pressed="true"],
a.filter-link--selected {
    @include border-color-token(
        filter-button-selected-border-color,
        color-stroke-strong
    );

    font-weight: bold;
}

a.filter-link--selected:visited {
    @include border-color-token(
        filter-button-selected-border-color,
        color-stroke-strong
    );
}

button.filter-button[disabled],
button.filter-button[aria-disabled="true"],
button.filter-button[aria-pressed="true"][disabled],
button.filter-button[aria-pressed="true"][aria-disabled="true"],
a.filter-link:not([href]),
a.filter-link[aria-disabled="true"],
a.filter-link--selected:not([href]),
a.filter-link--selected[aria-disabled="true"] {
    @include color-token(
        filter-button-disabled-foreground-color,
        color-foreground-disabled
    );

    font-weight: normal;

    /* todo: we can elimate the need for these overrides by using :not([disabled]) in place where defining hover states */
    &:hover,
    &:focus {
        @include background-color-token(
            filter-button-background-color,
            color-background-secondary
        );
        @include color-token(
            filter-button-disabled-foreground-color,
            color-foreground-disabled
        );
    }
}

button.filter-button[aria-pressed="true"][disabled]:hover,
button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
a.filter-link--selected:not([href]):hover,
a.filter-link--selected[aria-disabled="true"]:hover {
    @include background-color-token(
        filter-button-selected-background-color,
        color-state-secondary-hover
    );
}

/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
a.filter-link:focus:not(:focus-visible),
button.filter-button:focus:not(:focus-visible) {
    outline: none;
}
