@mixin action-size($font-size) {
    .mdi {
        width: $font-size;

        &:before {
            margin-top: -1 * ($font-size / 2);
            font-size: $font-size;
            line-height: $font-size;
        }
    }
}

.action {
    display: inline-block;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s;

    &:hover {
        opacity: 1;
    }

    .mdi {
        display: inline-block;
        width: 28px;
        position: relative;
        text-align: center;

        &:before {
            position: absolute;
            top: 50%;
            left: 0;
            text-align: center;
            margin-top: -12px;
            font-size: 24px;
            line-height: 24px;
        }

        &:after {
            content: "x";
            color: transparent;
        }

    }

    &.action-sm {
        @include action-size(18px);
    }

    &.action-lg {
        @include action-size(32px);
    }
}