@import '../../../styles/mixins';

$bundle-bgcolor: $white;
$bundle-border-width: 2px;
$bundle-arrow-inner-size: 10px;
$bundle-arrow-size: $bundle-arrow-inner-size + ($bundle-border-width * 1.5);

$bundle-tab-zindex: 2;
$bundle-panel-bg-zindex: 1;

$slick-arrow-size: 44px;

.productBundles {
    &_title {
        @include title-1;
        margin-bottom: 20px;
    }
    &_card {
        @include grid-item;
        height: 100%;
        outline: none;
    }
    &_bundle {
        @extend %reset-button;
        display: block;
        width: 100%;
        height: 100%;
        text-align: left;
        border: $bundle-border-width solid $mid-gray;
        border-radius: 8px;
        background-color: $bundle-bgcolor;
        transition: border-color 0.3s ease;
        cursor: pointer;
        outline: none;

        position: relative;

        &:after, &:before {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            height: 0;
            width: 0;
            pointer-events: none;
            transform: translateX(-50%);
            border: solid transparent;

            opacity: 0;
            transition: opacity 0.15s ease;
        }

        &:after {
            border-color: transparent;
            border-top-color: $bundle-bgcolor;
            border-width: $bundle-arrow-inner-size;
            transition-delay: 0.05s;
        }
        &:before {
            border-color: transparent;
            border-top-color: $primary-color;
            border-width: $bundle-arrow-size;
            transition-delay: 0s;
        }

        &--selected,
        &:focus,
        &:hover {
            border-color: $primary-color;

            &:after, &:before {
                opacity: 1;
                transition-delay: 0s;
            }
            &:before {
                transition: opacity 0.15s ease;
            }
            &:after {
                transition: opacity 0.05s ease;
            }
        }

    }
    &_panel {
        position: relative;
        padding: 40px 0 50px;

        &:before {
            @include full-window-width;
            content: "";
            background-color: $light-gray;
            z-index: $bundle-panel-bg-zindex;
        }
    }
    &_summary,
    &_features {
        position: relative;
        z-index: $bundle-panel-bg-zindex + 1;
    }
    &_features {
        margin-top: 20px;
    }

    // Bundle carousel's styles
    &_container {
        .slick {
            &-slider {
                @include media-md-down {
                    $slider-padding: 25px;
                    
                    padding-left: $slider-padding;
                    padding-right: $slider-padding;
                }
            }
            &-list {
                @include grid-row;
            }
            &-prev {
                @include media-md-down {
                    left: 0;
                }
            }
            &-next {
                @include media-md-down {
                    right: 0;
                }
            }
            &-track {
                display: flex;
                margin-left: 0;
            }
            &-slide {
                height: inherit;
    
                & > div {
                    height: 100%;
                }
            }
        }
    }
    // Show bottom arrow on bundle cards with slick track overflow hidden
    &_tab {
        position: relative;
        z-index: $bundle-tab-zindex;
        margin-bottom: $bundle-arrow-size * -1;
    }
    &_panel {
        z-index: $bundle-tab-zindex - 1;
    }
    &_card {
        padding-bottom: $bundle-arrow-size;
    }
}
