// ==========================================================================
// Buttons
// ==========================================================================

// Shared
.button,
.button__count {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    padding: (@spacing-base * 0.75);

    border-radius: @border-radius-base;
    box-shadow: 0 1px 1px fade(#000, 10%);
    background: #fff;
    border: 0;

    color: @gray;
    user-select: none;
    font-weight: @font-weight-bold;
    text-shadow: none;
}

// Buttons
.button {
    padding-left: @spacing-base;
    padding-right: @spacing-base;
    transition: all 0.2s ease;

    &:hover,
    &:focus {
        color: @gray-dark;
        outline: 0;

        &::after {
            display: none;
        }
    }

    &.tab-focus {
        .tab-focus();
    }
}

// Count bubble
.button__count {
    margin-left: (@spacing-base / 2);
    animation: fadein 0.2s ease;

    &::before {
        content: '';
        position: absolute;
        display: block;
        width: @arrow-size;
        height: @arrow-size;
        left: 1px;
        top: 50%;
        margin-top: -(@arrow-size / 2);

        background: inherit;
        border: inherit;
        border-width: 1px 0 0 1px;
        transform: rotate(-45deg) translate(-50%, -50%);
    }
}