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

.Outer {
    height: 0;
    position: sticky;
    top: var(--window-height);
    // top: calc(100vh - #{functions.pxRem(180)});
    z-index: 2;
    pointer-events: none;
    padding-left: functions.pxRem(30);
    padding-right: functions.pxRem(30);
    transition: top 0.3s;

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

    // @media all and (min-width: functions.em(1200)) {
    //     top: calc(100vh - #{functions.pxRem(256)});
    // }
}

// .Spacer {
//     margin-bottom: functions.pxRem(90);

//     @media all and (min-width: functions.em(1200)) {
//         margin-bottom: functions.pxRem(128);
//     }
// }

.CTA {
    width: functions.pxRem(140);
    display: block;
    pointer-events: auto;
    margin-left: auto;
    border-radius: 50%;
    aspect-ratio: 1/1;
    overflow: hidden;
    transform: translateY(calc(-100% - #{functions.pxRem(30)}));
    box-shadow: 0 0 functions.pxRem(10) rgba(#000, 0.1);
    transition: background-color 0.3s, fill 0.3s;

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

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

    &:before {
        content: '';

    }

    svg {
        width: 100%;
    }

    &--Brand {
        background-color: colours.$orange;
        fill: #FFF;

        &:hover {
            background-color: colours.$green;
        }
    }

    &--Campaign {
        background-color: #FFF;
        fill: colours.$orange;

        &:hover {
            background-color: colours.$orange;
            fill: #FFF;
        }
    }

    &--Website {
        background-color: colours.$green;
        fill: #FFF;

        &:hover {
            background-color: colours.$orange;
        }
    }
}