/* stylelint-disable selector-class-pattern */

.Filters {
    background-color: var(--white);

    &-grey-background {
        background-color: var(--gray-200);
    }

    &-switcher {
        .ButtonsRow-text {
            display: inline-block;
            font-weight: 500;
            text-transform: uppercase;
        }
    }

    &-fixed {
        padding: 20px 0;
        position: fixed;
        top: 0;
        width: inherit;
        z-index: 9999;
    }

    &,
    &-fixed {
        border-bottom: 1px solid var(--gray-400);
    }

    &,
    &-buttons {
        padding-bottom: 15px;

        &-stores {
            width: 55%;
        }

        .dropdown {
            display: inline-block;
        }
    }

    &-date {
        display: inline-block;
        font-weight: 500;
        padding-right: 15px;
    }

    &-period {
        display: inline-block;
        width: initial;
    }

    &-search-wrapper {
        display: flex;
    }

    &-search-row .Filters {
        background: none;
        border: none;
        padding: 0;
    }

    &-period .btn-group .btn {
        padding: 11px 15px 7px;
    }

    .ButtonsRow .btn {
        border: 1px solid #d9d2d0;
        border-radius: 3px;
        display: block;
        float: left;
        font-size: 12px;
        line-height: 1.33;
        padding: 13px 20px 11px;
        position: relative;
    }
    .ButtonsRow-active[type="button"],
    .ButtonsRow-active[type="button"]:focus {
        background-color: #ececec;
        box-shadow: inset 0 0 5px 0 #ccc, inset 0 1px 1px 0 #ccc;
    }
    .ButtonsRow .btn:hover {
        /* stylelint-disable max-line-length */
        background: linear-gradient(to bottom, rgb(255 255 255 / 50%), #e0e0e0), linear-gradient(#fff, #fff);
        border-color: #a8a0a0;
        box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
        color: #4a4a4a;
        z-index: 2;
    }
    .ButtonsRow .btn:focus {
        border-color: #ececec;
        box-shadow: inset 0 0 5px 0 #ccc, inset 0 1px 1px 0 #ccc;
        color: #6d6565;
    }
    .ButtonsRow .btn + .btn {
        margin-left: -1px;
    }

    .ButtonsRow .btn:first-child:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .ButtonsRow .btn:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
    .ButtonsRow .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        font-size: 12px;
        height: 36px;
        padding: 8px 15px 7px;
        position: relative;
        z-index: 2;
    }

    .dropdown-toggle .caret {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #818081;
        height: 0;
        transform: none;
        vertical-align: middle;
    }

    .Select-control {
        font-size: 12px;
    }

    .Select-placeholder {
        height: 34px;
        line-height: 34px;
        top: 0;
    }

    .Select-input {
        height: 34px;
    }
}