@require '../../../node_modules/@informatica/archipelago-icons/dist/archipelago_icons.css';
@import '../../base/components/pill.styl';

.pill {
    min-width: pill--min-width;
    max-width: pill--max-width;
    height: pill--height;
    background: pill--background;
    border: pill--border;
    border-radius: pill--border-radius;
    padding-left: pill--padding-left;
    font-size: pill--font-size;
    & + & { margin-left: pill--adjacent--margin-left; }
    &:hover { border-color: pill--hover--border-color; }
    &__label {
        padding-right: pill--label--padding-right;
        a {
            text-decoration: none;
            &:hover { text-decoration: underline; }
        }
    }
    &__menu {
        font-size: 11px;
        @extend .aicon;
        &:before { @extend .aicon__expand-collapse:before; }
        padding-right: pill--menu--padding-right;
    }
    &__dismiss {
        font-size: pill--dismiss--font-size;
        color: pill--dismiss--color;
        @extend .aicon;
        &:before { @extend .aicon__close-solid:before; }
        // &:focus { outline: 0 none; }
        // &:hover,
        // &:active,
        // &:focus { color: color--blue--4; }
    }
    // FIXME: once variants has been defined for IconButton, move to that
    // instead of manually overriding styles for :focus
    .icon-button {
        &:hover,
        &:active,
        &:focus {
            .pill__dismiss { color: color--blue--4; }
        }
    }
}