_button.scss

.button {
    padding: 0;
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;

    &--primary {
        @include button($color--light-blue, $color--dark-blue);
        display: inline-block;

        .form--filters & {
            margin-right: 0;

            @include media-query(tablet-portrait) {
                flex-basis: 125px;
            }
        }
    }

    &:hover {
        cursor: pointer;
    }

    &--contains-icons {
        display: flex;
        align-items: center;

        .header & {
            margin-right: 20px;
        }
    }

    &--transparent {
        @include button(transparent, $color--black);
        @include button--narrow;
        color: $color--black;
        border: 1px solid $color--black;

        &:hover {
            color: $color--white;
        }
    }

    &--filters {
        @include button($color--white, $color--white);
        display: flex;
        justify-content: space-between;
        max-width: 300px;
        padding: 15px 20px;
        margin-bottom: 20px;
        font-weight: $weight--normal;
        color: $color--default;
        border-color: $color--light-mid-grey;

        @include media-query(tablet-portrait) {
            display: none;
        }
    }

    &--filters-header {
        display: flex;
    }

    &--search {
        position: absolute;
        top: 12px;
        right: 10px;

        svg {
            fill: $color--primary;
        }
    }
}