.tab {
    --tab-background: var(--color-white);
    --tab-background-active: var(--color-primary);
    --tab-height: 50px;
    --tab-min-width: unset;
    --tab-padding-vertical: 12px;
    --tab-padding-horizontal: 16px;
    --tab-font-size: 14px;
    --tab-line-height: var(--line-height-md);
    --tab-transition: all var(--transition-base);
    --tab-box-shadow: var(--shadow-md);
    --tab-gap: 6px;

    --tab-label-color: var(--color-black);
    --tab-label-color-active: var(--color-white);

    --tab-icon-size: 24px;
    --tab-icon-padding: 3px;
    --tab-icon-border-radius: var(--border-radius-full);
    --tab-icon-background-active: var(--color-white);
    --tab-icon-box-shadow-active: var(--shadow-sm);

    border: none;
    background-color: var(--tab-background);
    height: 100%;
    min-width: var(--tab-min-width);
    padding: var(--tab-padding-vertical) var(--tab-padding-horizontal);
    font-size: var(--tab-font-size);
    line-height: var(--tab-line-height);
    transition: var(--tab-transition);
    cursor: pointer;
    box-shadow: var(--tab-box-shadow);
    display: flex;
    align-items: center;
    column-gap: var(--tab-gap);
    color: var(--tab-label-color);

    @media (min-width: 480px) {
        --tab-font-size: var(--font-size-md);
    }

    @media (min-width: 1024px) {
        --tab-min-width: 265px;
        --tab-font-size: var(--font-size-lg);
        --tab-gap: var(--spacing-lg);
        --tab-icon-size: 48px;
    }

    &:hover,
    &:focus,
    &[aria-selected="true"] {
        background-color: var(--tab-background-active);

        .tab__icon {
            background: var(--tab-icon-background-active);
            box-shadow: var(--tab-icon-box-shadow-active);
            border-radius: var(--tab-icon-border-radius);
            text-align: center;
        }

        .tab__label {
            color: var(--tab-label-color-active);
        }
    }

    &.tab--biogas {
        &:hover,
        &:focus,
        &[aria-selected="true"] {
            --tab-background-active: var(--color-biogas);
        }
    }
}

.tab__icon {
    display: flex;
    width: var(--tab-icon-size);
    height: var(--tab-icon-size);
    padding: var(--tab-icon-padding);
    border-radius: var(--tab-icon-border-radius);
    text-align: center;
    align-items: center;
    justify-content: center;

    svg {
        max-width: 100%;
        max-height: 100%;
    }
}

.tab__label {
    color: var(--tab-label-color);
}