@import '~@capillarytech/cap-ui-library/styles/variables';

.cap-slide-box-v2.custom-header-footer {
    .slidebox-header {
        display: none;
    }
    .custom-slidebox-header {
        position: absolute;
        top: 0;
        width: 100%;
        padding: $CAP_SPACE_16 $CAP_SPACE_48;
        left: 0;
        background: #fff;
        border-radius: 0 0 4px 4px;
        z-index: 111;
        display: flex;
        align-items: center;

        .heading-title {
            width: 98%;
        }

        #box-actions {
            height: 24px;
        }

        .close-slidebox, .back-arrow-icon {
            cursor: pointer;
        }

        /* TODO: cap-react-ui-library class removed — review this override */
        .cap-input {
            .ant-input {
                height: 32px;
                line-height: 24px;
            }

            &.error .error-message {
                top: 1rem;
            }
        }
    }
    .custom-slidebox-contnet {
        padding-top: 8px;
    }
    .slidebox-custom-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px $CAP_SPACE_24;
        left: 0;
        background: #fff;
        border-radius: 0 0 4px 4px;
        z-index: 1;
    }
    .modal-slidebox-wrapper #slidebox-container .slidebox-content-container {
        overflow-y: unset;
        height: unset;

        #slidebox-content {
            overflow-y: auto;
            height: calc(100vh - 54px);
            padding: 10px $CAP_SPACE_24;
        }
    }
}


.cap-slide-box-v2.custom-header-footer {
    .slidebox-header {
        display: flex;
    }
    .slidebox-custom-footer {
        height: 88px;
        border-top: none;
        display: flex;
        align-items: center;
        padding-left: $CAP_SPACE_48;
    }
    .custom-slidebox-header {
        height: 92px;
        padding-left: $CAP_SPACE_48;
    }
}