@import 'component.buttons';

.remove-button {
    @extend .btn--naked;
    background-color: transparent;
    border: 0;
    vertical-align: top;
    white-space: nowrap;

    [class^="icon-"],
    [class*=" icon-"] {
        color: color(black);
        font-size: 1.2em;
        vertical-align: middle;
    }

    &:hover {
        transform: none;
    }

    &:focus {
        @include pulsar-icon-button-focused;
        transform: none;
    }
}

a + .remove-button {
    margin-left: 10px;
}

*:not(.btn__group) > .remove-button {
    padding: 0;
}

.btn__group > .remove-button {
    padding: 0 ($padding-base-horizontal / 2);
}

.btn__group .btn + .remove-button {
    margin-left: 0;
}

.remove-button {
    @extend .btn--naked;
    background-color: transparent;
    border: 0;
    vertical-align: top;
    white-space: nowrap;

    [class^="icon-"],
    [class*=" icon-"] {
        color: color(black);
        font-size: 1.2em;
        vertical-align: middle;
    }

    &:hover {
        transform: none;
    }

    &:focus {
        @include pulsar-icon-button-focused;
        transform: none;
    }
}

a + .remove-button {
    margin-left: 10px;
}

*:not(.btn__group) > .remove-button {
    padding: 0;
}

.btn__group > .remove-button {
    padding: 0 ($padding-base-horizontal / 2);
}

.btn__group .btn + .remove-button {
    margin-left: 0;
}

Stop duplicating button styles in rendered CSS
Stop duplicating button styles in rendered CSS
