@use '../../../design-system' as *;

.twoColumn .cell {
    border: none !important;

    &:first-child {
        width: calc(100% - #{$spacing-size-16});
    }

    &:last-child {
        width: $spacing-size-16;
    }
}

// Hack to deal with sub-groups on mobile
@media screen and (max-width: $breakpoint-pricing-medium) {
    .twoColumn .subGroupHeader .cell:not(:first-child) {
        width: $spacing-size-16;
    }
}

// Hack to deal with sub-groups on mobile
:global(div[id*='community']) .twoColumn .subGroup .cell {
    &:nth-child(3),
    &:nth-child(4) {
        display: none;
    }
}

// Hack to deal with sub-groups on mobile
:global(div[id*='enterprise']) .twoColumn .subGroup .cell {
    &:nth-child(2),
    &:nth-child(4) {
        display: none;
    }
}

// Hack to deal with sub-groups on mobile
:global(div[id*='together']) .twoColumn .subGroup .cell {
    &:nth-child(2),
    &:nth-child(3) {
        display: none;
    }
}

.row {
    display: flex;
    align-items: center;
    min-height: $spacing-size-12;

    &:first-child {
        margin-top: -$spacing-size-2;
    }

    &:first-child .cell {
        padding-top: $spacing-size-4;
    }

    &:not(:first-child) {
        border-top: 1px solid var(--color-border-secondary);
    }
}

.cell {
    width: calc(100% / var(--num-columns));
    padding-top: $spacing-size-4;
    padding-bottom: $spacing-size-4;

    &:nth-child(3) {
        border-right: 1px solid var(--color-border-secondary);
        border-left: 1px solid var(--color-border-secondary);
    }

    &.hasDetails {
        min-width: $spacing-size-24;
        padding-right: $spacing-size-2;
        padding-left: $spacing-size-2;
    }
}

.subGroup {
    transition: background-color $transition-default-timing;
    transition: all 0.3s;
    user-select: none;

    .row .cell {
        padding-top: $spacing-size-4;
        padding-bottom: $spacing-size-4;

        &:first-child {
            padding-left: $spacing-size-6;
        }
    }

    @media screen and (max-width: $breakpoint-pricing-medium) {
        .row .cell:not(:first-child) {
            width: $spacing-size-16;
        }
    }

    &:first-child .subGroupHeader .cell {
        padding-top: $spacing-size-4;
    }

    &:not(:first-child) {
        border-top: 1px solid var(--color-border-secondary);
    }

    &.isOpen .subGroupHeader .cell:first-child svg {
        transform: rotate(180deg);
    }

    &.isOpen .subGroupHeader .cell:not(:first-child) span {
        opacity: 0;
        transition: all 0.3s;
    }

    .subGroupHeader .cell:not(:first-child) span {
        transition: all 0.3s;
    }
}

.subGroupHeader {
    --icon-size: #{$spacing-size-5};

    display: flex;
    align-items: center;
    min-height: $spacing-size-12;
    cursor: pointer;

    .cell:first-child {
        span {
            --icon-color: var(--color-link);

            padding-left: $spacing-size-3;
            font-weight: var(--text-semibold);
            color: var(--color-link);
        }

        svg {
            transition: transform $transition-default-timing;
        }
    }

    .cell:not(:first-child) {
        --icon-color: var(--color-util-gray-500);

        display: flex;
        justify-content: center;

        svg {
            transition: opacity $transition-default-timing;
        }
    }
}

.subGroupHeader:hover {
    background: color-mix(in srgb, var(--color-bg-secondary), var(--color-bg-primary) 50%);
    transition: all 0.6s;
}

.subGroupIconWrapper {
    height: 24px;
    width: 24px;
    padding: 2px;
    margin-left: $spacing-size-2;
    display: inline-flex;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-link), var(--color-bg-primary) 80%);
    transition: all 1s;
}

.subGroupIconWrapper:hover {
    border: 1px solid color-mix(in srgb, var(--color-link), var(--color-bg-primary) 40%);
    box-shadow: var(--shadow-sm);
    transition: all 1s;
}

.subGroupTitleIcon:hover .subGroupIconWrapper {
    border: 1px solid color-mix(in srgb, var(--color-link), var(--color-bg-primary) 40%);
    box-shadow: var(--shadow-sm);
    transition: all 1s;
}

.subGroupTitleIcon {
    display: flex;
}

.row:hover {
    background: color-mix(in srgb, var(--color-bg-secondary), var(--color-bg-primary) 50%);
    transition: all 0.4s;
}
