@use './variable_defaults' as defaults;
@use './mixins';

$classname-common: defaults.$classname-common !default;
$classmod-container: defaults.$classmod-grid-container !default;
$classname-container: "#{$classname-common}--#{$classmod-container}" !default;
$classname-component-trigger: defaults.$classname-component-trigger !default;
$classname-component-target: defaults.$classname-component-target !default;

$breakpoint-medium: defaults.$breakpoint-medium !default;
$breakpoint-large: defaults.$breakpoint-large !default;

$grid-column-count: defaults.$grid-column-count !default;
$trigger-span-small: defaults.$trigger-span-small !default;
$trigger-span-medium: defaults.$trigger-span-medium !default;
$trigger-span-large: defaults.$trigger-span-large !default;

$slide-duration: 300 !default;

.#{$classname-container} {
    display: grid;
    grid-template-columns: repeat($grid-column-count, 1fr);
    grid-auto-flow: row dense;

    .#{$classname-common} {
        &__#{$classname-component-trigger} {
            grid-column-start: span $trigger-span-small;

            @media screen and (min-width: $breakpoint-medium) {
                grid-column-start: span $trigger-span-medium;
            }

            @media screen and (min-width: $breakpoint-large) {
                grid-column-start: span $trigger-span-large;
            }
        }

        &__#{$classname-component-target} {
            @include mixins.slide-open($slide-duration, 'gh-ct-visible');

            grid-column: span $grid-column-count;

            @media screen and (min-width: $breakpoint-medium) {
                grid-column-start: span $grid-column-count;
            }
        }
    }
}