@import '../../_coreStyles.scss';
/* 
    We're using absolute height and negative margins in this file
    this is because borders make a lot of this logic weird, and the spec calls for overlap of borders
    between what are logically parent and child elements
    
    eg. in Outlined pills, the button focus circle should exactly overlap the pill's outline

    Using negative margin means we need to do less padding management of the container based on
    what elements it happens to contain, and elements can just intrude on the left-right padding of the parent
    */

.bolt-pill {
    align-items: center;
    border-radius: 120px;

    &:focus {
        outline: none;
    }

    &.clickable {
        cursor: pointer;
    }

    &:not(.clickable) {
        cursor: default;
    }

    // Count font weight
    &.count {
        .bolt-pill-content {
            font-weight: $fontWeightSemiBold; // TODO: Follow up with Vinicius
        }
    }

    // Size classes
    &.compact {
        padding: 2px 8px;
        height: 20px;

        .bolt-pill-content {
            font-size: $fontSize;
        }
    }

    &.regular {
        padding: 4px 12px;
        height: 24px;

        .bolt-pill-content {
            font-size: $fontSize;
        }

        .bolt-pill-icon {
            margin-left: -4px;
            margin-right: 6px;
        }

        .bolt-pill-filled-visual {
            width: 20px;
            height: 20px;

            margin-left: -10px;
        }

        .bolt-pill-button {
            margin-right: -12px;
        }
    }

    &.large {
        padding: 6px 12px;
        height: 32px;

        .bolt-pill-content {
            font-size: $fontSizeM;
        }

        .bolt-pill-icon {
            margin-left: -4px;
            margin-right: 10px;
        }

        .bolt-pill-filled-visual {
            width: 24px;
            height: 24px;

            margin-left: -8px;
        }

        .bolt-pill-button {
            margin-right: -8px;
        }
    }

    // Variant classes
    &.standard {
        background-color: $neutral-alpha-6;

        &.clickable.hover {
            background-color: $neutral-alpha-10;
        }
    }

    &.outlined {
        background-color: transparent;
        border: 1px solid $neutral-alpha-20;

        &.clickable.hover {
            background-color: $neutral-alpha-6;
        }

        // Reduce padding by 1px to account for border as well
        &.compact {
            padding: 1px 7px;
        }

        &.regular {
            padding: 3px 11px;
        }

        &.large {
            padding: 5px 11px;
        }

        .bolt-pill-button {
            border: 1px solid transparent;
        }
    }

    &.colored {
        // Background color will be overridden so we aren't setting one here

        // Using actual black / white so theme colors don't alter our contrast on custom colors
        &.dark {
            color: white;
        }

        &.light {
            color: black;
        }
    }
}

.bolt-pill-content {
    overflow: hidden;

    &:not(:last-child) {
        margin-right: 6px;
    }
}

.bolt-focus-visible .bolt-pill:focus {
    border: 1px solid $communication-background;
    @include box-shadow-focus-rect();

    // Compensate for the border being added
    &.compact {
        padding: 1px 7px;
    }

    &.regular {
        padding: 3px 11px;
    }

    &.large {
        padding: 5px 11px;
    }
}

.bolt-pill-icon {
    font-size: $fontSizeML;
}

.bolt-pill-filled-visual {
    overflow: hidden;
    border-radius: 50%;
    margin-right: 6px;
}

// High specificity to ensure we override default styles
button.bolt-pill-button.bolt-button.icon-only {
    font-size: $fontSize;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0px;
    color: inherit;

    &:hover {
        background-color: $transblack-6;
    }
}