// Contains ANTD customizations.

// antd wave animation
html {
    --antd-wave-shadow-color: rgba(0, 0, 0, 0.5) !important;
}

// button with prefix image
.button-prefix {
    img {
        display: inline-block;
        margin-right: 8px;
    }
}
// # RTL styling overrides
*[dir="rtl"] .button-prefix {
    img {
        margin-right: 0 !important;
        margin-left: 8px;
    }
}

// primary tabs - filter
.primary-tabs {
    .ant-tabs-nav {
        width: 715px !important;
        height: 45px !important;
        background: #ffffff 0% 0% no-repeat padding-box !important;
        border: 1px solid #d4d4d4 !important;
        border-radius: 4px !important;
        padding-left: 50px;
    }
    .ant-tabs-tab {
        padding: 12px 6px !important;
        color: #b9b9b9 !important;
    }
    .ant-tabs-tab + .ant-tabs-tab {
        margin-left: 70px !important;
    }
    .ant-tabs-nav::before {
        border: 0 !important;
    }
    .ant-tabs-tab-active .ant-tabs-tab-btn {
        color: $color-primary !important;
        font-weight: 500;
    }
    .ant-tabs-tab-btn:focus,
    .ant-tabs-tab-remove:focus,
    .ant-tabs-tab-btn:active,
    .ant-tabs-tab-remove:active,
    .ant-tabs-tab:hover {
        color: $color-primary !important;
    }
    .ant-tabs-ink-bar {
        height: 5px !important;
        background: $color-primary 0% 0% no-repeat padding-box;
        border-radius: 5px 5px 0px 0px !important;
    }
}
// ! remove if it effect other components
.ant-tabs-rtl .ant-tabs-nav .ant-tabs-tab {
    margin-left: 70px !important;
}
// RTL styling overrides
*[dir="rtl"] .primary-tabs {
    .ant-tabs-nav {
        padding-left: 0 !important;
        padding-right: 50px;
    }
}

// primary table header

.primary-table-header {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #eeeeee;
}

// primary input search

.primary-input-search {
    height: 34px !important;
    background: #ffffff 0% 0% no-repeat padding-box !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

// Image component img - contain - so it can't stretched
.ant-image-img {
    object-fit: cover;
}

// modal close icon alignment
.ant-modal-close-x img {
    display: inline-block;
}

// checkbox
.primary-checkbox {
    position: relative;
    & > span {
        margin-left: 7px;
    }
    .suffix-text {
        position: absolute;
        left: 20px;
        top: 6px;
    }

    .ant-checkbox-checked::after,
    .checkbox-input:focus + .ant-checkbox-inner,
    .ant-checkbox-checked .ant-checkbox-inner {
        border-color: $color-secondary !important;
    }
    .ant-checkbox-wrapper:hover .ant-checkbox-inner,
    .ant-checkbox:hover .ant-checkbox-inner,
    .ant-checkbox-input:focus + .ant-checkbox-inner {
        border-color: $color-secondary !important;
    }
    .ant-checkbox-checked .ant-checkbox-inner {
        background-color: $color-secondary;
    }
}

//  RTL styling overrides

*[dir="rtl"] .primary-checkbox {
    & > span {
        margin-left: 0 !important;
        margin-right: 7px;
    }

    .suffix-text {
        right: 20px;
    }
}

// secondary input

.secondary-input {
    height: 39px !important;
    background: #fcfcfc 0% 0% no-repeat padding-box !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

// customise date picker and ranger picker
.ant-picker-range .ant-picker-active-bar,
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
    background: $color-primary !important;
}
.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
    border-color: $color-primary !important;
}
.ant-picker-header-view button:hover,
.ant-picker-today-btn {
    color: $color-primary !important;
}
.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
    background-color: #08975214 !important;
}
.ant-picker-cell-inner::after {
    color: $color-primary !important;
    border-color: $color-primary !important;
}
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
    background: $color-primary !important;
}

// ! global customise popconfirm -  comment it if it conflict with other popconfirm

.ant-popover-inner-content {
    .ant-btn-primary {
        border: 0 !important;
        background: $color-primary !important;
    }
    .ant-btn-default:hover,
    .ant-btn-default:focus {
        color: $color-secondary !important;
        border-color: $color-secondary !important;
    }
}

.ant-popover-message {
    display: flex;
}
// .ant-popover-message-title {
//     padding-left: 12px !important;
// }
.ant-row:not(.d-flex) {
    display: block !important;
}

// customizable collapse omponment
.primary-collapse {
    color: #21213d;
    & > .ant-collapse-item {
        border: 0 !important;
        margin-bottom: 15px;
    }
    // header
    .ant-collapse-header,
    .ant-collapse-content-box {
        border: 1px solid #d8d8d8;
    }
    .ant-collapse-header {
        background: #ffffff !important;
        padding: 6px 16px !important;
        .ant-collapse-header-text {
            flex: auto !important;
            font-size: 16px;
        }
    }
    .ant-collapse-item-active .ant-collapse-header {
        background: #f8f8f8 !important;
    }
    // content
    .ant-collapse-content-box {
        background: #ffffff !important;
        margin-top: 4px;
    }
}

// label no label margin
.form-item-label-no-border .ant-form-item-label {
    padding: 0 !important;
}

// primary progress bar
.primary-progress {
    .ant-progress-bg,
    &.ant-progress-status-success .ant-progress-bg {
        background: $color-primary;
    }
}

// switch

.ant-switch-checked {
    background: #089752 !important;
}