@import "common/var";

/*
    Active items have the highest priority.
        If an item is active, no other modifiers' styles will be applied,
        except for `cursor` property set by `action` and `disabled` modifiers.
    Disabled items have the second highest priority.
        If an item is disabled, it can't be actionable at all.
    Actionable items have the lowest priority.
        These styles are only applied if the item is not active or disabled.
*/

.c-list-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.c-list-group__item {
    border: 1px solid $color-gray--015;
    padding: $space4;
    margin-bottom: -1px;
    color: $--color-black;

    &:first-child {
        border-top-left-radius: $--border-radius-base;
        border-top-right-radius: $--border-radius-base;
    }
    &:last-child {
        border-bottom-right-radius: $--border-radius-base;
        border-bottom-left-radius: $--border-radius-base;
        margin-bottom: 0;
    }
    // to account for links
    &:hover, &:focus, &:active {
        color: inherit;
        text-decoration: none;
    }
}

// actionable items
.c-list-group--action > .c-list-group__item,
.c-list-group__item--action {
    &:not(.c-list-group__item--disabled) {
        cursor: pointer;
    }
    &:not(.c-list-group__item--disabled):not(.c-list-group__item--active) {
        &:hover, &:focus, &:active {
            background-color: $color-brand--015;
        }
    }
}

// disabled items
.c-list-group__item--disabled {
    color: $color-gray--030;
    pointer-events: none;
    &:hover, &:focus, &:active {
        color: $color-gray--030;
    }
}

.c-list-group--action > .c-list-group__item--disabled,
.c-list-group__item--action.c-list-group__item--disabled {
    cursor: not-allowed;
}

// active items
.c-list-group__item--active {
    background-color: $--color-primary;
    border-color: $--color-primary;
    color: $--color-white;
    z-index: 1;

    &:hover, &:focus, &:active {
        background-color: $--color-primary;
        color: $--color-white;
    }
}