@use '../../../../../node_modules/@theorchard/suite-components/src/styles/utils'
    as utils;

.bulk-upload-sidebar {
    padding: var(--padding-large);
    width: 354px;
    height: fit-content;
    border-radius: 20px;
    box-shadow: 10px 10px 20px 8px utils.var-with-opacity(--gray-400, 10%);
    border: none;
    background-color: var(--white);

    .SuiteSection-top {
        --section-gap: 0;
    }

    .Stepper-Step-title-row .title {
        color: var(--text-primary);
        font-size: 16px;
        line-height: 22px;
    }

    .Stepper-Step-content {
        gap: var(--padding-small);
    }

    .Stepper .layout-vertical {
        gap: var(--padding-medium-small);
    }

    .Stepper-Step.vertical {
        min-height: 44px;
    }

    .Stepper-Step-icon.variant-success {
        border-color: var(--success-650);
    }

    .Stepper-Step-icon > .GlyphIcon.variant-success {
        color: var(--success-650);
    }

    &-buttons {
        display: flex;
        gap: 8px;
    }

    &-step {
        &-body {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 20px;
            display: flex;
            flex-direction: column;
            gap: var(--padding-medium);
            padding: 0 0 var(--padding-large) 0;

            a {
                cursor: pointer;
            }

            ul {
                margin-bottom: 0;
                padding-left: 20px;
            }

            .highlight {
                color: var(--gray-900);
                border-radius: 3px;
                padding: 2px 4px;
                width: fit-content;
            }

            .success {
                background: var(--success-100);
            }

            .failure {
                background: var(--error-100);
            }

            .skipped {
                background: var(--warning-100);
            }
        }

        &-column-error-text {
            color: var(--error-650);
        }

        &-inline {
            display: flex;
            gap: 6px;
            align-items: center;
        }
    }

    .Stepper-Step-description a {
        color: var(--midnight-650);
    }
}