.attachment-wrapper {
    margin-top: 6px;

    .attachment-title {
        color: #1e1e1e;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px;
    }

    .ant-upload.ant-upload-drag {
        height: 110px !important;
        border-color: #585858;
        background: #f4f4f4;

        // .ant-upload.ant-upload-btn {
        //     .ant-upload-drag-container {
        //         .ant-upload-drag-icon {
        //             padding-top: 20px;
        //             padding-bottom: 20px;
        //         }
        //     }
        // }
    }

    .attachment-uploaded-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 10px;
        margin-top: 10px;

        .attachment-uploaded-item {
            position: relative;
            width: 100%;
            height: 240px;

            cursor: pointer;

            @include atMin768 {
                width: calc(25% - 8px);
            }

            &:hover {
                .attachment-uploaded-item-mask {
                    opacity: 1;
                }
            }

            .attachment-uploaded-item-mask {
                position: absolute;
                width: 100%;
                height: calc(100% - 20px);
                background-color: rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s ease-in-out;

                .attachment-uploaded-item-actions {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    z-index: 99;
                    .ant-btn {
                        width: 30px !important;
                        height: 30px !important;
                        border-radius: 3px;
                        background: rgba(0, 0, 0, 0.3);

                        svg {
                            color: #fff;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }
                    }
                }
            }

            .attachment-uploaded-item-image,
            .attachment-uploaded-item-video,
            .attachment-uploaded-item-audio,
            .attachment-uploaded-item-document {
                width: 100%;
                height: 220px;
                background: #fff;
                box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

                &.error {
                    border: 2px solid $danger;
                }
            }

            .attachment-uploaded-item-name {
                margin-top: 5px;
                color: #898989;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;

                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .attachment-uploaded-item-image {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 100%;
                    height: 220px;
                    object-fit: cover;
                }
            }
            .attachment-uploaded-item-document,
            .attachment-uploaded-item-audio {
                display: flex;
                align-items: center;
                justify-content: center;
                svg {
                    font-size: 50px;
                    color: #585858;
                }
            }

            .attachment-uploaded-item-video {
                .react-player-video-wrapper {
                    width: 100% !important;
                    height: 220px !important;
                    display: flex;
                    align-items: center;

                    video {
                        height: auto !important;
                        // height: 100% !important;
                    }
                }
            }
        }
    }
}

.attachment-wrapper.table-employee-profile-attachments {
    .attachment-uploaded-wrapper {
        display: block;
        margin: 0 auto;
        width: 60px !important;
        height: 60px !important;

        .attachment-uploaded-item {
            width: 60px !important;
            height: 60px !important;
            &:hover {
                .attachment-uploaded-item-mask {
                    opacity: 1;
                }
            }
            .attachment-uploaded-item-mask {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s ease-in-out;

                .attachment-uploaded-item-actions {
                    position: relative !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 99;
                    top: unset;
                    right: unset;
                    .ant-btn {
                        width: 30px !important;
                        height: 30px !important;
                        border-radius: 3px;
                        background: transparent;
                        svg {
                            color: #fff;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }
                    }
                }
            }
            .attachment-uploaded-item-document,
            .attachment-uploaded-item-video {
                width: 60px !important;
                height: 60px !important;
                box-shadow: none;
                margin-top: -8px;
                svg {
                    font-size: 23px;
                    color: #585858;
                }
                .react-player-video-wrapper {
                    width: 100% !important;
                    height: 100% !important;
                }
            }
        }
    }
}