@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

$_cds-modal-border-radius: var(--cds-modal-br) !default;

.cds-modal {
    box-shadow: vars.$cds-elevation-raised;
    background-color: var(--cds-color-background-default);
    border-radius: $_cds-modal-border-radius;
    padding: vars.$cds-spacing-150;
    border: 0;
    color: var(--cds-color-text-default);
    z-index: vars.$cds-layer-modal;
    overflow: visible;

    //--MEDIUM DEFAULT
    width: vars.$cds-modal-m;
    height: fit-content;

    //--MODAL DEFAULT
    max-height: calc(100% - vars.$cds-spacing-200);
    max-width: calc(100% - vars.$cds-spacing-200);

    &[open], &[data-open] {
        display: flex;
        flex-direction: column;
        animation: showUp vars.$cds-transition-fast ease-out forwards;
    }

    //ELEMENTS
    &__header {
        display: flex;
        align-items: center;
        gap: vars.$cds-spacing-50;
        justify-content: space-between;
        padding: vars.$cds-spacing-100;
    }

    &__title {
        @include mixins.cds-head-s;
    }

    &__close {
        @include mixins.cds-icon(config.$default-icon-close);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        height: fit-content;
        border-radius: vars.$cds-border-radius-25;

        &::before {
                @include mixins.cds-icon-size(vars.$cds-icon-150);
            }

        &:hover {
            opacity: 0.5;
        }
    }

    &__content {
        overflow-y: auto;
        padding: vars.$cds-spacing-100;
        height: 100%;
    }

    &__footer {
        display: flex;
        gap: vars.$cds-spacing-50;
        justify-content: right;
        padding: vars.$cds-spacing-100;
    }

    &--center {
        height: fit-content;
        max-height: calc(100% - vars.$cds-spacing-200);
        max-width: calc(100% - vars.$cds-spacing-200);
    }

    &--left {
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;

        &[open] {
            animation: showFromLeft vars.$cds-transition-fast ease-out forwards;
        }
    }

    &--right {
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        left: 100%;

        &[open] {
            animation: showFromRight vars.$cds-transition-fast ease-out forwards;
        }
    }


    // SIZE MODIFIERS
    &--small {
        width: vars.$cds-modal-s;
    }

    &--medium {
        width: vars.$cds-modal-m;
    }

    &--large {
        width: vars.$cds-modal-l;
    }
}

@keyframes showFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes showFromRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes showUp {
    0% {
        transform: translateY(64px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes showDown {
    0% {
        transform: translateY(-64px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}