/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Cognos Analytics Home (C) Copyright IBM Corp. 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

 @mixin searchBar() {

    .ba-autoComplete-searchBar {

        transition: width 0.3s, background-color 0.3s;

       .bx--search--xl {
           .bx--search-input {
               background-color: $ui-02;
               color: $text-01;
               @include type-style('body-short-01');
               border-bottom: 0px;
           }

           input::placeholder {
               color: $text-03;
           }
       }

       .bx--search-input:focus {
           outline-color: $icon-03;
       }

       .bx--search-close:before {
           background-color: transparent;
       }

       .bx--search-close:hover {
           outline:2px solid $icon-03 !important;
           border: 0;
           border-top: 1px solid transparent;
           padding: 0px!important;
           background-color: $hover-selected-ui;
       }

       .bx--search-close:hover:before {
           background-color: $ui-02;
       }

       .bx--search-close:focus {
            background-color: $active-ui;
       }

       .bx--search-magnifier, .bx--search-close {
           fill: $icon-02;
        }


       .ba-common-dropdown {
           @include theming(background-color, ui-05);
           background-color: $ui-background;

           .ba-common-list {

               .ba-common-dropdown__groupLabel {
                   color: $text-02;
                   @include type-style('helper-text-01');
                   margin: 8px 0px 8px 16px;
               }

               .ba-common-listItem-wrapper {
                   background-color: $ui-background;
                   .ba-common-listItem {
                       background-color: $ui-background;
                       .ba-common-label {
                           color: $text-02;
                           @include type-style('body-short-01');
                       }
                   }
               }

           }

           .ba-common-listItem:hover:not(.is-disabled) .ba-common-listItem__iconBtn {
               .bx--btn--ghost .bx--btn__icon {
                   fill: $icon-02!important;
               }
           }

           .ba-common-listItem .ba-common-listItem__iconBtn {
               .bx--btn--ghost .bx--btn__icon {
                   fill: $icon-02!important;
               }
           }

       }
    }
 }

 @mixin searchBarResponsive() {

    $searchCollapsed: 48px;
    $smallSearchBar: 156px;
    $medSearchBar: 280px;
    $largeSearchBar: 348px;

    @media only screen and (max-width: 1056px) {
       .ba-autoComplete-searchBar {
           width: $searchCollapsed;
           overflow: hidden;
            .bx--search--xl {
                .bx--search-input {
                    background-color: $ui-background;
                    cursor: pointer;
                }
                .bx--search-close {
                    display: none;
                }
           }

            &:focus-within {
                width: $medSearchBar;
                .bx--search--xl {
                    .bx--search-input {
                        background-color: $ui-02;
                        cursor: auto;
                    }
                    .bx--search-close {
                        display: flex;
                    }
                }
           }
        }
    }

    @media only screen and (max-width: 740px) {
       .ba-autoComplete-searchBar {
           width: $searchCollapsed;
           overflow: hidden;
            .bx--search--xl {
                .bx--search-input {
                    background-color: $ui-background;
                    cursor: pointer;
                }
                .bx--search-close {
                    display: none;
                }
           }

            &:focus-within {
                width: $smallSearchBar;
                .bx--search--xl {
                    .bx--search-input {
                        background-color: $ui-02;
                        cursor: auto;
                    }
                    .bx--search-close {
                        display: flex;
                    }
                }
           }
        }
    }

    @media only screen and (min-width: 1312px) {
        .ba-autoComplete-searchBar {
            width: $largeSearchBar;
            .bx--search--xl {
                .bx--search-input {
                    background-color: $ui-02;
                }
            }
            &:focus-within {
                width: $largeSearchBar;
                .bx--search--xl {
                    .bx--search-input {
                        background-color: $ui-02;
                        cursor: auto;
                    }
                    .bx--search-close {
                        display: flex;
                    }
                }
           }
        }
    }
 }