.list {
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            position: relative;
            list-style-position: inside;
        }
    }

    .bg {
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: var(--list-tab-light);
        }
    }

    &__label {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 40px;
        overflow: hidden;
        padding: var(--list-label-padding);

        & > div {
            flex: 1;
            color: var(--list-label-color);
            text-transform: capitalize;
        }
    }

    &__tab {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 50px;
        overflow: hidden;
        padding: var(--list-label-padding);
        border-top: 1px solid var(--list-border-color);

        & > div {
            position: relative;
            flex: 1;
            color: var(--list-label-color);
        }
    }

    li {
        &:nth-child(odd) {
            &.bg {
                &:before {
                    opacity: var(--list-tab-dark);
                }
            }
        }
    }
}