@use '../core/styles/common/tokens' as *;

@use './empty-state-theme' as *;

.kbq-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 1;

    &.kbq-empty-state_compact {
        padding: var(--kbq-empty-state-size-compact-padding-top) var(--kbq-empty-state-size-compact-padding-horizontal)
            var(--kbq-empty-state-size-compact-padding-bottom);

        & .kbq-empty-state-icon {
            margin-bottom: var(--kbq-empty-state-size-compact-image-margin-bottom);
        }

        & .kbq-empty-state-text {
            max-width: var(--kbq-empty-state-size-compact-max-width);
        }

        & .kbq-empty-state-title {
            max-width: var(--kbq-empty-state-size-compact-max-width);

            margin-bottom: var(--kbq-empty-state-size-compact-title-margin-bottom);
        }

        & .kbq-empty-state-actions {
            max-width: var(--kbq-empty-state-size-compact-max-width);

            margin-top: var(--kbq-empty-state-size-compact-actions-margin-top);
        }

        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
            margin-bottom: var(--kbq-empty-state-size-compact-image-addon-height);
        }
    }

    &.kbq-empty-state_normal {
        padding: var(--kbq-empty-state-size-normal-padding-top) var(--kbq-empty-state-size-normal-padding-horizontal)
            var(--kbq-empty-state-size-normal-padding-bottom);

        & .kbq-empty-state-icon {
            margin-bottom: var(--kbq-empty-state-size-normal-image-margin-bottom);
        }

        & .kbq-empty-state-text {
            max-width: var(--kbq-empty-state-size-normal-max-width);
        }

        & .kbq-empty-state-title {
            max-width: var(--kbq-empty-state-size-normal-max-width);

            margin-bottom: var(--kbq-empty-state-size-normal-title-margin-bottom);
        }

        & .kbq-empty-state-actions {
            max-width: var(--kbq-empty-state-size-normal-max-width);

            margin-top: var(--kbq-empty-state-size-normal-actions-margin-top);
        }

        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
            margin-bottom: var(--kbq-empty-state-size-normal-image-addon-height);
        }
    }

    &.kbq-empty-state_big {
        padding: var(--kbq-empty-state-size-big-padding-top) var(--kbq-empty-state-size-big-padding-horizontal)
            var(--kbq-empty-state-size-big-padding-bottom);

        & .kbq-empty-state-icon {
            margin-bottom: var(--kbq-empty-state-size-big-image-margin-bottom);
        }

        & .kbq-empty-state-text {
            max-width: var(--kbq-empty-state-size-big-max-width);
        }

        & .kbq-empty-state-title {
            max-width: var(--kbq-empty-state-size-big-max-width);

            margin-bottom: var(--kbq-empty-state-size-big-title-margin-bottom);
        }

        & .kbq-empty-state-actions {
            max-width: var(--kbq-empty-state-size-big-max-width);

            margin-top: var(--kbq-empty-state-size-big-actions-margin-top);
        }

        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
            margin-bottom: var(--kbq-empty-state-size-big-image-addon-height);
        }
    }

    &.kbq-empty-state_align-center {
        justify-content: center;
    }

    &.kbq-empty-state_align-top {
        justify-content: flex-start;
    }
}

@include kbq-empty-state-theme();
@include kbq-empty-state-typography();