@use '../variables' as *;
@use '../mixins/z-index' as *;
@use '../mixins/viewport-gaps' as *;
@use '../mixins/breakpoints' as *;

%abs-bg {
    position: absolute;
    z-index: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.modal {
    @extend %abs-bg;
    --viewport-gap: 2.5%;
    --overlay-background-color: #000;
    --overlay-opacity: 0.25;
    --canvas-max-width: 460px;
    --canvas-max-height: 80vh;
    --canvas-background-color: #fff;
    --canvas-opacity: 1;
    --canvas-y-position: 25%;
    --canvas-header-height: 60px;
    --canvas-header-padding-x: 20px;
    --canvas-header-padding-y: 0;
    --canvas-body-height: calc(var(--canvas-max-height) - var(--canvas-header-height));
    --canvas-body-padding-x: var(--canvas-header-padding-x);
    --canvas-body-padding-y: var(--canvas-body-padding-x);
}

.modal {
    position: fixed;
    @include z-index(modal);
    &:not([data-is-active*='true' i]) {
        display: none;
    }
    padding: var(--viewport-gap);
}

.modal__overlay {
    @extend %abs-bg;
    background-color: var(--overlay-background-color);
    opacity: var(--overlay-opacity);
}

.modal__dialog {
    position: relative;
    top: var(--canvas-y-position);
    left: 50%;
    transform: translate(-50%, calc(var(--canvas-y-position) * -1));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: var(--canvas-max-width);
    max-height: var(--canvas-max-height);
}

.modal__dialog-bg {
    @extend %abs-bg;
    background-color: var(--canvas-background-color);
    opacity: var(--canvas-opacity);
    max-height: var(--canvas-max-height);
}

.modal__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--canvas-header-height);
    padding: {
        left: var(--canvas-header-padding-x);
        right: var(--canvas-header-padding-x);
        top: var(--canvas-header-padding-y);
        bottom: var(--canvas-header-padding-y);
    }

    h3 {
        margin: 20px 0 0 0;
    }
}

.modal__close-button {
    padding: 0;
    background-color: transparent;

    .hamburger {
        --width: 12px;
    }
}

.modal__body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: {
        left: var(--canvas-body-padding-x);
        right: var(--canvas-body-padding-x);
        top: 0;
        bottom: var(--canvas-body-padding-y);
    }
}