@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';

.ColumnContainer {
    row-gap: functions.pxRem(60);
}

.StepsAnimationMobile {
    width: 100%;
    overflow: hidden;

    @media all and (min-width: functions.em(768)) {
        display: none;
    }
}

.StepsAnimationMobileInner {
    .AnimationStepWrap, .AnimationStepInner {
        transition: transform 0.6s;
    }
}

.Steps {
    @media all and (min-width: functions.em(768)) {
        width: 50%;
    }
}

.Step {
    margin-bottom: functions.pxRem(60);

    @media all and (min-width: functions.em(768)) {
        display: grid;
        margin-bottom: 0;
    }

    &:first-child {
        padding-top: 0;
    }

    &:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    &:before {
        @media all and (min-width: functions.em(768)) {
            content: '';
            width: 100%;
            display: block;
            aspect-ratio: 1/1;
            grid-row: 1;
            grid-column: 1;
        }
    }
}

.StepContent {
    @media all and (min-width: functions.em(768)) {
        margin-top: auto;
        margin-bottom: auto;
        grid-row: 1;
        grid-column: 1;
    }

    @media all and (min-width: functions.em(1200)) {
        width: 83.3333%;
    }
}

.StepAnimation {
    margin-top: functions.pxRem(40);

    @media all and (min-width: functions.em(768)) {
        display: none;
    }
}

.Animation {
    width: 100%;
    position: relative;
    padding: functions.pxRem(45);
    overflow: hidden;

    @media all and (min-width: functions.em(1024)) {
        padding: functions.pxRem(60);
    }

    @media all and (min-width: functions.em(1440)) {
        padding: functions.pxRem(80);
    }

    &:before {
        content: '';
        display: block;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: functions.pxRem(1) dashed;
    }
}

.AnimationCenterText {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: functions.pxRem(90);

    @media all and (min-width: functions.em(1024)) {
        padding: functions.pxRem(120);
    }

    @media all and (min-width: functions.em(1440)) {
        padding: functions.pxRem(160);
    }
}

.AnimationStepWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.AnimationStep {
    width: functions.pxRem(90);
    height: functions.pxRem(90);
    border-radius: 50%;
    border: functions.pxRem(1) solid;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s, color 0.3s;

    @media all and (min-width: functions.em(1024)) {
        width: functions.pxRem(120);
        height: functions.pxRem(120);
    }

    @media all and (min-width: functions.em(1440)) {
        width: functions.pxRem(160);
        height: functions.pxRem(160);
    }

    &--Orange {
        background-color: colours.$orange;

        .AnimationStepInner {
            color: #FFF;
        }
    }

    &--White {
        background-color: #FFF;

        .AnimationStepInner {
            color: colours.$orange;
        }
    }
}

.AnimationStepInner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.StepsAnimation {
    display: none;

    @media all and (min-width: functions.em(768)) {
        width: 50%;
        display: block;
        position: sticky;
        top: 0;
    }
}