.saved-query-row {
    width: 100%;
    overflow: hidden;

    &:last-of-type {
        border-bottom: 1px solid $color-border;
    }

    &__row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        border-top: 1px solid $color-border;

        padding: 0 0.5rem;

        &:hover {
            background: #232f43;

            .saved-query-row__description {
                color: white;
            }
        }
    }

    &__row-column {
        display: flex;
        align-items: center;
        width: calc(100% - 17rem);
    }

    &__description,
    &__results-container,
    &__query,
    &__actions {
        height: 2.5rem;
    }

    &__description {
        margin-bottom: 0;
        margin-right: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 1.5rem;
        line-height: 1.5rem;
        font-weight: normal;
        color: $color-text-1;
    }

    &__results-container {
        display: flex;
        margin-bottom: 0;
        color: #cad2e2;
        min-width: 4rem;
        justify-content: center;

        .icon {
            height: 1.25rem;
            width: 1.25rem;
        }
    }

    &__results-items {
        width: 3.125rem;
        justify-content: center;
        display: flex;
        vertical-align: middle;
    }

    &__query {
        flex: 0 0 auto;
    }

    &__sparkline {
        display: inline-block;
        vertical-align: middle;
        padding-right: 0.625rem;
        padding-left: 0.3125rem;
    }

    &__result-count {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.5rem;
        margin: 0.25rem 0 0.25rem 0.5rem;
        border-radius: 1.125rem;
        background: $color-bg-3;
    }

    &__add-query {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
        height: 2.5rem;
    }

    &__center {
        display: flex;
        align-items: center;
    }

    .action {
        opacity: 0;
        display: none;
    }

    &:hover .action {
        display: block;
        opacity: 0.5;
    }

    // stylelint-disable-next-line no-duplicate-selectors
    &__actions {
        display: flex;

        .action {
            align-items: center;
            padding: 0.25rem 0.325rem;

            &:hover {
                opacity: 1;
            }

            &:not(:first-child) {
                margin-left: 0.25rem;
            }
        }
    }

    .query-button {
        max-width: 25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__actions:hover {
        display: flex;
    }
}

.theme-light {
    .saved-query-row {
        &:last-of-type {
            border-bottom-color: $color-light-border;
        }

        &__row {
            border-color: $color-light-border;

            &:hover {
                background: #f2f4f8;
            }

            &:hover .saved-query-row__description {
                color: $color-light-text-1;
            }
        }

        &__result-count {
            background: $color-light-bg-2;
            color: $color-light-text-3;
        }

        &__description {
            color: $color-light-text-1;
        }

        &:hover .action {
            color: $color-light-text-1;
        }
    }
}