.extraction-container {
    position: relative;
    will-change: transform;
    transform: translateZ(0);

    .extraction-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px 12px;

        .extraction-header-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 400;
            color: var(--color-black);
            position: relative;

            .options-item-button {
                background: transparent;
                border: none;
                cursor: pointer;
            }

            .options-menu {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                background: var(--color-white);
                border-radius: 4px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                z-index: 1000;

                ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    border-radius: 4px;

                    .options-item-button {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        width: 100%;
                        padding: 12px 16px;
                        background: none;
                        border: none;
                        text-align: left;
                        cursor: pointer;
                        font-size: 12.8px;
                        color: var(--color-gray);

                        &:hover {
                            background: var(--color-off-white);
                        }

                        span {
                            height: 18px;
                            line-height: 21.92px;
                        }
                    }

                    li:last-child {
                        border-top: 1px solid var(--color-silver-gray);
                    }
                }
            }
        }

        .extraction-header-buttons {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            width: 273px;

            .create-button {
                background-color: var(--color-orange);
                border: none;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                color: var(--color-white);
                padding: 8px;
                width: 132.5px;
                height: 36px;
                font-size: 12.8px;
                cursor: pointer;
            }

            .execute-all-button {
                background-color: transparent;
                border: 1px solid var(--color-gray);
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                width: 132.5px;
                height: 36px;
                padding: 8px;
                cursor: pointer;
            }
        }
    }

    .extraction-details {

        .extraction-list-empty {
            padding: 0 12px;
        }

        .extraction-item {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 0 16px 0;
            border-top: 1px solid var(--color-silver-gray);
            border-bottom: 1px solid var(--color-silver-gray);

            .extraction-item-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 44px;
                padding: 8px 12px;
                background-color: var(--color-off-white);
                position: relative;

                .extraction-item-title {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .platform-icon {
                        width: 16px;
                    }

                    .extraction-name {
                        font-size: 14px;
                        font-weight: 700;
                    }
                }

                .extraction-item-header-buttons {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    height: 20px;

                    .update-button,
                    .item-options-button {
                        background: transparent;
                        border: none;
                        width: 20px;
                        cursor: pointer;
                    }
                }

                .item-options-menu {
                    position: absolute;
                    top: 100%;
                    right: 0;
                    background: var(--color-white);
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                    z-index: 1000;
                    will-change: transform;
                    transform: translateZ(0);

                    ul {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        border-radius: 4px;

                        .item-options-item-button {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            width: 100%;
                            padding: 12px 16px;
                            background: none;
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            font-size: 12.8px;
                            color: var(--color-gray);

                            &:hover {
                                background: var(--color-off-white);
                            }

                            span {
                                height: 18px;
                                line-height: 21.92px;
                            }
                        }

                        li:last-child {
                            border-top: 1px solid var(--color-silver-gray);
                        }
                    }
                }
            }

            .extraction-item-details {
                .extraction-info {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    width: 270px;
                    font-size: 12.8px;
                    padding: 5px 12px 16px 12px;

                    .paused-status-schedule {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        background-color: var(--color-light-blue);
                        padding: 4px 8px;
                        border-radius: 6px;
                        contain: layout paint;
                    }
                }

                .more-info-container {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    padding: 0 12px;

                    .more-info-toggle {
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        gap: 4px;
                        color: var(--color-orange);
                        height: 18px;

                        .more-info-text {
                            font-size: 12.8px;
                        }

                        .toggle-button {
                            background: none;
                            border: none;
                            cursor: pointer;
                            width: 16px;
                            height: 16px;
                        }
                    }

                    .info-content {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        background-color: var(--color-off-white);
                        padding: 8px 10px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}

.copy-extraction,
.copy-extraction-all {
    width: 300px;
    padding: 16px 12px;
    position: relative;

    .copy-extraction-title,
    .copy-extraction-all-title {
        padding-bottom: 20px;
        font-size: 16px;
    }

    .copy-extraction-form,
    .copy-extraction-all-form {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .copy-extraction-input-group,
        .copy-extraction-all-input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .copy-extraction-label,
            .copy-extraction-all-label {
                font-size: 12.8px;
                line-height: 17.92px;
            }

            .copy-extraction-input,
            .copy-extraction-all-input {
                width: 274px;
            }
        }

        .copy-extraction-buttons,
        .copy-extraction-all-buttons {
            display: flex;
            gap: 8px;
            justify-content: space-between;

            .copy-extraction-btn,
            .copy-extraction-all-btn {
                width: 133px;
                height: 36px;
            }
        }
    }
}