.SearchResults {
    position: relative;
    width: 100%;

    .Select-input {
        font-size: 14px;
    }

    .Select-menu-outer {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        max-height: $select-menu-max-height;
    }

    /* as it was specified in react-select library */
    .Select-menu {
        max-height: ($select-menu-max-height - 122px);
    }

    .Select-option {
        border-bottom: 1px solid $grey_160;
        min-height: 60px;
        padding: 5px 10px;

        &-highlighted {
            font-weight: 500;
        }
    }

    .SearchResultsItem {
        &-image {
            float: left;
            height: 50px;
            margin-right: 10px;
            width: 50px;
        }

        &-isrc {
            float: right;
        }

        &-artist {
            color: $grey_300;
        }
    }

    .SearchResultsItem-image {
        &-placeholder {
            background-color: $mouse;
            border: 3px;
            height: 48px;
            width: 48px;
        }
    }

    .TrackAlbumArt {
        max-height: 48px;
        max-width: 48px;
    }

    .Select-artists {
        .SearchResultsItem-artist {
            color: $rhino;
            font-size: 14px;
            padding: 15px 0;
        }
    }

    .Select-noresults,
    .SearchError {
        padding: 40px 60px;
        text-align: center;
    }

    .SearchError-label,
    .Search-no-results-label {
        margin-top: 5px;
    }

    .SearchError {
        border: solid 1px $red_200;

        .Bolder {
            font-weight: 500;
        }

        .Icons-attention {
            margin-right: 5px;
            vertical-align: text-bottom;
        }
    }

    & .Icons-search {
        position: absolute;
        right: 10px;
        top: 9px;
    }

    .Icons-close-round {
        height: 16px;
        width: 16px;
    }

    &-clear {
        cursor: pointer;
        position: absolute;
        right: 32px;
        top: 10px;
    }

    &-wrapper {
        flex: 0 1 100%;
        min-width: 0;

        .Select-control {
            border-radius: 4px;
            display: flex;
            height: auto;
            overflow: visible;
        }
    }

    &-heading {
        color: $grey_600;
        font-weight: 500;
        padding: 5px 10px;
    }

    /* stylelint-disable selector-class-pattern */
    .Select--single.has-value .Select-multi-value-wrapper {
        padding-left: 10px;
    }
    /* stylelint-enable selector-class-pattern */

    .SearchTrigger {
        margin-left: 9px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .TagsInput-value {
        &-isrc {
            color: $timberwolf;
            margin-left: 5px;
        }
    }
}

/* stylelint-disable selector-class-pattern */
.SearchResults-with-dropdown {
    &.is-open {
        .Select-control {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
    &.SearchResults-no-query.is-open {
        .Select-control {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
    }
}
/* stylelint-enable selector-class-pattern */

.SearchResults-loading {
    .Select-noresults {
        padding: 0;
        text-align: left;
    }

    .SearchResultsLoadingIndicator {
        margin: 0 auto;
        padding: 20px 0 40px;
    }

    .LoadingIndicator {
        transform: scale(.5, .5);
    }
}