@import '../../styles/variables';

/**************************************
 * Category Selector
 **************************************/

.bdl-CategorySelector {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    height: 8 * $bdl-grid-unit;

    // bdl-CategorySelector-more-label specifically needs to be nested for specificity otherwise .btn-plain styles will overwrite
    .bdl-CategorySelector-pill,
    .bdl-CategorySelector-more-label {
        display: inline-block;
        height: 8 * $bdl-grid-unit;
        padding: 2 * $bdl-grid-unit 4 * $bdl-grid-unit;
        font-weight: bold;
        font-size: $bdl-fontSize;
        line-height: 4 * $bdl-grid-unit;
        white-space: nowrap;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 4 * $bdl-grid-unit;
        outline: none;
        cursor: pointer;

        &:hover,
        &:focus {
            // The following styles are needed for specificity otherwise they will be overwritten by .btn-plain
            padding: 2 * $bdl-grid-unit 4 * $bdl-grid-unit;
            font-weight: bold;
            background-color: $bdl-gray-05;
            border: 1px solid transparent;
        }

        &.is-selected {
            color: $white;
            background-color: $bdl-box-blue;

            .fill-color {
                fill: $white;
            }

            &:focus {
                border-color: $bdl-box-blue;
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1);
            }
        }
    }
}

.bdl-CategorySelector-links {
    height: 8 * $bdl-grid-unit;
    overflow: hidden;
}

.bdl-CategorySelector-pill {
    margin-right: 2 * $bdl-grid-unit;
}

.bdl-CategorySelector-more {
    &.hide {
        display: none;
    }
}