.icon-lock svg
    fill: $color-light
    height: 12px
    position: relative
    top: 1px
    margin-left: 3px

.icon-edit svg
    fill: $color-light
    height: 12px
    position: relative
    top: 2px

.icon-save svg
    fill: $color-light
    height: 12px
    position: relative
    top: 2px

.icon-cross svg
    fill: $color-light
    height: 10px
    position: relative

.icon-arrow svg
    fill: $color-secondary
    height: 15px
    position: relative
    top: 3px

 
.spinner
    display: inline-block
    position: relative
    left: 50%
    transform: translateX(-50%) scale(0.4)
    width: 80px
    height: 80px

    & div
        transform-origin: 40px 40px
        animation: spinner 1.2s linear infinite
        &::after
            content: " ";
            display: block;
            position: absolute;
            top: 3px;
            left: 37px;
            width: 6px;
            height: 18px;
            border-radius: 20%;
            background: $color-secondary
        @for $i from 1 through 12
            &:nth-child(#{$i})
                transform: rotate(($i - 1) * 30deg)
                animation-delay: (12 - $i) * -0.1s

@keyframes spinner
    0% 
        opacity: 1
    100% 
        opacity: 0
