// scss-lint:disable SelectorDepth NestingDepth

.webhooks-index {
  .webhooks-description {
    @include font-main;
    margin: 1em 0;
  }

  .activity-filters-list {
    padding: 0;
  }

  .filter-element {
    border-left: 3px solid $color-concrete;
    list-style: none;
    margin: 1em 0;
  }

  .filter-block {
    align-items: center;
    display: flex;
    padding-left: 1em;

    .sn-icon-down {
      cursor: pointer;
      margin-right: 1em;

      &.collapsed {
        @include rotate(-90deg);
      }
    }

    .create-webhook {
      margin-left: auto;
    }

    .filter-name {
      @include font-h3;
      margin-right: .5em;
    }

    .info-container {
      .dropdown-menu {
        padding: .5em;
        width: 400px;
      }
    }

    .filter-info-title {
      @include font-small;
      padding-left: .25em;
    }

    .tags-list {
      display: flex;
      flex-wrap: wrap;

      .filter-info-tag {
        @include font-small;
        background: $color-concrete;
        flex-shrink: 0;
        margin: .25em;
        padding: .25em;
      }
    }
  }

  .webhooks-list {
    list-style: none;
    padding-top: .5em;
  }

  .webhook-form {
    .webhook-form-row {
      align-items: center;
      display: flex;

      .form-group {
        margin: 0;
      }

      .form-text {
        flex-shrink: 0;
      }

      .webhook-form-trigger-text,
      .webhook-form-secret-key-text {
        flex-basis: 120px;
      }

      .webhook-method-container,
      .webhook-secret-key-container {
        margin: .5em;
      }

      .webhook-secret-key-container {
        flex-basis: 400px;
      }

      .url-input-container {
        margin: .5em;
      }
    }
  }

  .webhook {
    border-top: $border-tertiary;
    padding: .5em 0;

    .view-mode {
      align-items: center;
      display: flex;

      .method {
        margin: 0 .5em;
      }

      .webhook-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .active-webhook,
      .disabled-webhook {
        flex-basis: 110px;
        flex-shrink: 0;
        margin-left: auto;
        padding: 0 1em;
        text-align: right;

        .fas {
          margin-right: .25em;
        }
      }

      .active-webhook {
        color: $brand_success;
      }

      .dropdown-menu {
        @include font-button;

        .fas {
          margin-right: .25em;
        }

        .divider-label {
          @include font-small;
          color: $color-silver-chalice;
          padding-left: 1em;
        }

        a {
          border-radius: unset;
          cursor: pointer;
          padding: .5em 1em;

          &:hover {
            background: $color-concrete;
          }
        }
      }
    }

    &:not(.active) {
      .view-mode {
        color: $color-silver-chalice;
      }
    }
  }

  #deleteFilterModal {
    .delete-filter-form {
      display: inline-block;
    }
  }
}