willpower232/TOTPBTF3

@import "../app";
@import "variables";

h1.login-title {
    background:url(/img/logomain_dark.svg) no-repeat center center;line-height:6em;margin:4em 0 2em;text-indent:-999em;
}

.inverted h1.login-title {
    background-image:url(/img/logomain_light.svg);
}

.breadcrumbs {
    justify-content:center;

    &.overflowed {
        &:after {
            background:linear-gradient(to right, $mainbackground 0%, transparent 100%);
        }
    }

    a:first-child:before {
        display:none;
    }
}

.folderlist {
    li + li {
        margin-top:1em;
    }

    a {
        background:$border url(/img/arrow.svg) no-repeat calc(100% - 2rem) center;background-size:2rem;border-radius:1.5rem;height:3rem;justify-content:left;padding-left:2rem;
    }

    img {
        block-size:inherit;max-width:calc(100% - 6rem);object-fit:contain;
    }
}


.inverted .replaced-image {
    color:$text;
}

input:not([type='checkbox']) {
    border:3px solid $border;border-radius:1.5rem;padding:0 2rem;

    &.is-invalid {
        border-color:$fabpink;
    }
}

.fieldwrapper {
    input + label {
        left: 2rem;
    }

    input:placeholder-shown + label {
        left:calc(2rem + 3px);
    }
}

.toggle {
    background:$text;

    .helper {
        background:$text;box-shadow:0 0 10px $bigbackground;
    }

    input:checked + .helper {
        background:$greenback;
    }

    input[disabled] + .helper {
        background:black;
    }
}

.inverted .toggle .helper {
    box-shadow:0 0 10px $bigbackground_light;
}

.invalid-feedback strong {
    color:$redtext;
}

button,.button {
    background:$bigbackground;border:1px solid $border;border-radius:1.5rem;color:white!important;

    .fieldwrapper + & {
        margin-top:3rem;
    }

    &.button-primary {
        background:$fabpink;
    }

    &.button-secondary {
        background:$border;
    }

    &.button-bad {
        background:$redback;
    }

    &.button-good {
        background:$greenback;
    }
}

.code-and-timer {
    // calculate the approximate width of the whole thing
    --width:418px;
    @media (max-width:450px) {
        --width:90vw;
    }

    height:var(--width);
}

.a-code {
    line-height:var(--width);
}

.a-timer {
    height:100%;left:0;margin:0;position:absolute;top:0;width:100%;z-index:-1;

    // reference https://codepen.io/zebateira/pen/VvqJwm

    svg {
        height:100%;position:absolute;right:0;top:0;width:100%;
        // rotateY creates a clockwise effect
        // rotateZ moves starting point to top of circle
        transform:rotateY(-180deg) rotateZ(-90deg);
    }

    circle {
        // C = π * d
        // - diameter doesn't scale, use value from SVG
        // - apparently this needs to be calc'ed rather than fixed
        --circumference:calc(3.141592 * 180px);
        stroke-dasharray:var(--circumference);
        stroke-dashoffset:calc((var(--progress) / 100) * var(--circumference));
        fill:none;stroke:$fabpink;stroke-linecap:round;stroke-width:5px;
    }

    &.show {
        circle {
            transition:stroke-dashoffset 0.4s;
        }
    }

    &.done {
        opacity:1;

        circle {
            stroke:$border;
        }
    }
}

.js-copy {
    &.success {
        background-color:$greenback;
    }

    &.failure {
        background-color:$redback;
    }
}