// .btn enhancements
.btn {
    cursor: pointer;

    // button with svg icon
    .icon {
        height: 24px;
        width: 24px;
        vertical-align: -6px;
        fill: currentColor;
        stroke: currentColor;
    }


    // button with svg icon
    &.btn-sm {
        .icon {
            height: 20px;
            width: 20px;
            vertical-align: -5px;
        }
    }

    &--multiline {
        text-align: left;

        & > * {
            display: inline;
            white-space: normal;
        }
    }


    &--remove {
        text-align: left;
        color: currentColor;
        background-color: $color-grey-light-5;
        position: relative;
        cursor: pointer;

        &::after {
            content: "\d7"; // &times;
            line-height: 1;
            font-weight: bold;
            font-size: 125%;
            vertical-align: middle;
            white-space: nowrap;
            display: inline-block;
            padding-left: 5px;
        }
    }


    &--xs-100 {
        @include media-breakpoint-down(md)
        {
            margin-top: 5px;
            width: 100%;
        }
    }
}
