.admin-webhooks {
    .webhooks-table {
        .row {
            border-bottom: 0;
            padding: .5rem 0;
        }
        .row:hover {
            .webhook-options-wrapper {
                opacity: 1;
                transition: opacity .2s linear;
            }
        }
    }

    .table-header {
        @extend %bold;
        border-bottom: 1px solid $gray-light;
    }
    .table-body {
        .webhook-service {
            color: $gray;
        }
    }
    .single-webhook-wrapper {
        border-bottom: 1px solid $whitish;
    }
    .webhooks-options {
        margin-bottom: 1rem;
        text-align: right;
    }

    .webhook-service,
    .webhook-url {
        margin-right: .5rem;
    }
    .webhook-service {
        flex-basis: 20%;
        flex-grow: 0;
    }
    .webhook-url {
        flex-basis: 400px;
        flex-grow: 8;
        span {
            @include ellipsis($width: 65%);
            color: $gray-light;
            display: inline-block;
            vertical-align: middle;
        }
        a {
            color: $green-taiga;
            margin-left: .5rem;
            &:hover {
                color: $fresh-taiga;
            }
        }
    }
    .webhook-options {
        flex-basis: 100px;
        flex-grow: 0;
        min-width: 100px;
        text-align: center;
        a {
            color: $gray-light;
            margin-right: .5rem;
            transition: color .2s linear;
            vertical-align: middle;
            &:hover {
                color: $green-taiga;
                transition: color .2s linear;

            }
        }
    }
    .webhook-options-wrapper {
        opacity: 0;
        transition: opacity .3s linear;
    }
    .webhook-url-inputs {
        display: flex;
        flex-direction: row;
        input {
            flex-basis: 1;
            margin-right: .3rem;
        }
    }
    .history-single {
        align-items: center;
        border-bottom: 1px solid $whitish;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        margin-left: 22%;
        padding: .5rem;
        transition: background .2s linear;
        &:hover {
            background: rgba($fresh-taiga, .1);
            transition: background .2s linear;
        }
    }
    .history-response {
        background: $gray;
        border-radius: 25%;
        display: inline-block;
        height: .8rem;
        margin-right: .5rem;
        vertical-align: middle;
        width: .8rem;
        &.history-success {
            background: $fresh-taiga;
        }
        &.history-error {
            background: $red;
        }
    }
}