.icon
    width: 3rem
    height: 3rem
    border-radius: .5rem
    background: $lightgrey
    cursor: pointer
    display: flex
    align-items: center
    justify-content: center
    transition: all .2s

    &:hover
        transform: scale(1.1)

    &.cancel
        position: absolute
        left: -3.5rem
        top: 0
        background: transparent
        & img
            filter: invert(0)

    &.save
        background: $green_light
        // box-shadow: 0 0 .7rem .2rem transparentize($green_light, .75)
        box-shadow: 0 .4rem 0 darken($green_light, 20%)
    &.edit
        background: $green_light
        // box-shadow: 0 0 .7rem .2rem transparentize($green_light, .75)
        box-shadow: 0 .4rem 0 darken($green_light, 20%)
        &.active
            background: lighten($green_light, 10%)
            transform: scale(1.1)
    &.delete
        background: $red_light
        // box-shadow: 0 0 .7rem .2rem transparentize($red_light, .75)
        box-shadow: 0 .4rem 0 darken($red_light, 35%)
    &.password
        background: $blue
        // box-shadow: 0 0 .7rem .2rem transparentize($blue, .75)
        box-shadow: 0 .4rem 0 darken($blue, 40%)
    &.block
        background: $orange
        box-shadow: 0 .4rem 0 darken($orange, 30%)
        &.blocked
            transform: translateY(.4rem)
            filter:  grayscale(100%)
            box-shadow: none

            &:hover
                filter: grayscale(0)

    & img
        width: 2.2rem
        filter: invert(1)