/* Copyright (C) 2016 NooBaa */

svg-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    line-height: 1;
    fill: rgb(var(--color08));
    stroke: none;
    position: relative;

    > svg {
        vertical-align: top;
        width: 100%;
        height: 100%;
    }

    &.icon-xsmall {
        width: 10px;
        height: 10px;
    }

    &.icon-small {
        width: 16px;
        height: 16px;
    }

    &.icon-medium {
        width: 32px;
        height: 32px;
    }

    &.icon-big {
        width: 48px;
        height: 48px;
    }

    &.icon-xbig {
        width: 64px;
        height: 64px;
    }

    &.icon-xxbig {
        width: 128px;
        height: 128px;
    }

    &.beta-tag::after {
        position: absolute;
        bottom: -10px;
        left: -2px;
        z-index: 1;
    }

    .highlight &,
    &.highlight {
        fill: rgb(var(--color17));
    }

    .success &,
    &.success {
        fill: rgb(var(--color27))
    }

    .warning &,
    &.warning {
        fill: rgb(var(--color26));
    }

    .error &,
    &.error {
        fill: rgb(var(--color31));
    }

    .info &,
    &.info {
        fill: rgb(var(--color23));
    }

    .disabled &,
    &.disabled {
        fill: rgb(var(--color09));
    }

    &.match-theme {
        fill: rgb(var(--color20));
    }
}
