@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/placeholders';
@import '../../../styles/definitions/colors';
@import '../../../styles/mixins';
@import '../../../styles/grid';

// Local Variables
$namespace: '.comparableProducts';
$container-selector: "#{$namespace}_container";
$grid-content-selector: "#{$namespace}_content";
$container-with-inline-header-selector: "#{$container-selector}--inline-header-layout";
$container-with-left-header-selector: "#{$container-selector}--left-header-layout";
$container-with-add-button-selector: "#{$container-selector}--with-add-button";
$container-with-remove-button-selector: "#{$container-selector}--with-remove-button";

$compare-product-wrapper-padding-top: 50px;
$compare-product-wrapper-border-width: 1px;
$compare-product-container-border-color: $gray;
$compare-product-container-bgcolor-hover: $mid-gray;
$compare-product-heading-bgcolor: $light-gray;
$compare-product-border: var(--compare-product-border-width, 1px) solid var(--compare-product-border-color, $mid-gray);
$compare-product-color: $gray-34;
$compare-product-button-color-hover: $dark-gray;
$compare-product-content-padding: 28px;
$compare-product-description-padding-top: 54px;
$compare-product-description-content-padding-top: 15px;
$compare-product-heading-padding: 23px;
$compare-product-overlay-link-zindex: 1;

//Local Placeholders
%close-icon {
    display: flex;
}

// Component Styles
#{$namespace} {
    &_wrapper {
        position: relative;
        overflow: hidden;
        padding-top: $compare-product-wrapper-padding-top;
    }

    &_scrollContainer {
        overflow-x: auto;
        border: 1px solid $compare-product-container-border-color;
    }

    &_container {
        margin: 0 ($compare-product-wrapper-border-width + $grid-gutter-width) * -1;
        color: $compare-product-color;
        @include text-6;
        line-height: 20px;
    }

    &_grid {
        $compare-product-grid-min-width: 850px;
        $compare-product-left-header-width: 200px;

        display: grid;
        grid-template-columns: var(--compare-product-grid-template-columns, '#{$compare-product-left-header-width} 1fr');
        min-width: $compare-product-grid-min-width;
        min-height: 400px;

        &Item {
            position: relative;
            padding: 0 $grid-gutter-width;
            border-right: $compare-product-border;

            &--heading {
                border-right: 0;
                padding-right: 0;
            }

            &--description {
                #{$container-with-left-header-selector} & {
                    border-bottom: $compare-product-border;
                }
            }

            &--add,
            &--description {
                #{$container-with-remove-button-selector} & {
                    padding-top: $compare-product-description-padding-top + $compare-product-description-content-padding-top;
                }
                
                #{$container-with-inline-header-selector} & {
                    border-top: $compare-product-border;
                }
            }

            &--last {
                border-right: 0;

                #{$container-with-add-button-selector} & {
                    border-right: $compare-product-border;
                }
            }

            &--add {
                border-right: 0;
            }
        }

        #{$container-with-left-header-selector} & {
            min-width: $compare-product-grid-min-width + $compare-product-left-header-width;
        }
    }

    &_heading,
    &_content {
        height: 100%;
    }

    &_heading {
        padding: $compare-product-heading-padding;
        background-color: var(--compare-product-header-bgcolor, $compare-product-heading-bgcolor);

        &--description {
            #{$container-with-inline-header-selector} & {
                padding-top: $compare-product-heading-padding + 17px;
                padding-bottom: $compare-product-heading-padding + 17px;
                background-color: transparent;
                border-top: 0;
            }

            #{$container-with-left-header-selector} & {
                padding-top: $compare-product-heading-padding + 39px;
                padding-bottom: $compare-product-heading-padding + 16px;
                border-bottom: $compare-product-border;
            }
        }

        &:not(&--description) {
            #{$container-with-inline-header-selector} & {
                border-top: $compare-product-border;
            }
        }

        #{$container-with-left-header-selector} & {
            border-right: $compare-product-border;
        }
    }

    &_content {
        position: relative;
        padding: 18px $compare-product-content-padding;

        &--description {
            button, a {
                position: relative;
                z-index: $compare-product-overlay-link-zindex + 1;
            }

            &:before {
                content: "";
                position: absolute;
                top: 0;
                right: $grid-gutter-width * -1;
                bottom: 0;
                left: $grid-gutter-width * -1;
                opacity: 0;
                border-radius: 8px;
                background-color: $compare-product-container-bgcolor-hover;
                transition: opacity 0.3s ease;
            }
    
            &:hover {
                &:before {
                    opacity: 1;
                }
            }
        }
    }

    &_overlayLink {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: $compare-product-overlay-link-zindex;

        &Text {
            @extend %sr-only;
        }

        &:hover,
        &:focus {
            & ~ #{$grid-content-selector}:before {
                opacity: 1;
            }
        }
    }

	&_removeButton {
        position: absolute;
        top: calc(#{$compare-product-description-padding-top} / 2 * -1) ;
        right: 0;
        left: 0;
        transform: translateY(-50%);
        padding: 0 $compare-product-content-padding;
        z-index: $compare-product-overlay-link-zindex + 1;

		.button {
			&_item {
                @extend %reset-button;
				color: $link-text-color;
				font-size: $bodyFontSize6;
				font-weight: 500;

                &:hover, &:focus {
                    #{$namespace}_removeIcon {
                        background-color: $compare-product-button-color-hover;
                    }
                }
			}

			&_text {
				order: 2;
				padding: 0;
			}
		}
	}

	&_removeIcon {
        @extend %close-icon;

		$icon-width: 22px;
		$icon-height: 22px;
		$icon-bgcolor: $gray-71;
		
		display: flex;
        align-items: center;
        justify-content: center;
		width: $icon-width;
		height: $icon-height;
		margin: 0 10px 0 0;
		padding: 0 5px;
		border-radius: 50%;
        background-color: $icon-bgcolor;
	}

    &_closeButton {
        display: flex;
        position: absolute;
        top: calc($compare-product-wrapper-padding-top / 2);
        right: 5px;
        transform: translateY(-50%);
        z-index: calc($compare-product-overlay-link-zindex + 2);

        &Text {
            @extend %sr-only;
        }

        &Icon {
            @extend %close-icon;
            width: 24px;
        }
    }
}
