/**
 *
 *
 *
 */

@mixin component__icon()
{
    .icon {
        display: inline-block;
        font-size: inherit;
        height: 1.5em;
        width: 1.5em;
        overflow: visible;
        max-height: 100%;
        max-width: 100%;
    }

    .fill-primary {
        fill: $primary;
    }

    .fill-grey {
        fill: $grey;
    }

    .fill-success {
        fill: $success;
    }

    .fill-danger {
        fill: $danger;
    }

    .filled {
        fill: #fff;
        border-radius: 3px;
    }

    .file-table__column--actions {
        .icon {
            width: 2em;
            height: 2em;
            padding: 4px;
            fill: #ffffff;
            border-width: 1px;
            border-style: solid;
            border-radius: 3px;
            vertical-align: middle;
            
            &:hover {
                cursor: pointer;
            }
        }

        .fill-primary {
            background-color: $primary;
            border-color: darken($primary, 10%);
        }

        .fill-grey {
            background-color: $grey;
            border-color: darken($grey, 10%);
        }

        .fill-success {
            background-color: $success;
            border-color: darken($success, 10%);
        }

        .fill-danger {
            background-color: $danger;
            border-color: darken($danger, 10%);
        }
    }
}