.api-resource {
  display: flex;
  flex-direction: column;
  height: 100%;

  &-tabs {
    flex-grow: 1;
    height: calc(100% - 56px);
    overflow-y: auto;
  }

  .api-name-wrap {
    display: flex;
    justify-content: space-between;

    .name-input {
      flex-grow: 1;
    }
  }

  .param-config-form {
    margin-bottom: $p16;
    padding: $p16;
    // background-color: rgba($color-primary, .1);
    &-detailed {
      padding-left: $p12;
    }
  }

  .method-popover {
    .ant-popover-inner-content {
      padding: 12px 0;
    }
  }

  .popover {
    position: relative;
    display: flex;
    flex-wrap: nowrap;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 141px;
      height: 34px;
      cursor: pointer;
    }

    .select-container {
      .ant-select-dropdown-menu-item {
        height: 34px;
        padding: 0;
        line-height: 34px;
      }
    }

    .ant-input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .icon-shanchu {
      margin: 8px 0 0 5px;
    }

    .api-icon {
      padding-right: 5px;
    }
  }

  .popconfirm-container {
    z-index: 9999;
  }

  .api-method-option {
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgba($color-primary, 0);
    border-radius: $radius;
    cursor: pointer;
    transition: all 0.3s;

    .circle-container {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    }

    .btn-icon,
    .icon-color {
      width: 14px;
      height: 14px;
      color: $white;
      font-size: 12px;
      text-align: center;
      border: 1px solid rgba($color-primary, 0);
      border-radius: 50%;
      margin-right: 0;

      &-get {
        background-color: #00b49d;
        border-color: #00b49d;
      }

      &-post {
        background-color: #b890fa;
        border-color: #b890fa;
      }

      &-put {
        background-color: #f2be24;
        border-color: #f2be24;
      }

      &-patch {
        background-color: #4b44c9;
        border-color: #4b44c9;
      }

      &-delete {
        background-color: #d1344e;
        border-color: #d1344e;
      }

      &-options {
        background-color: #00b5d1;
        border-color: #00b5d1;
      }

      &-head {
        background-color: #17bc65;
        border-color: #17bc65;
      }

      &-empty {
        background-color: rgba($color-primary, 0);
      }
    }
  }
  .api-tag-select {
    &-btn {
      padding: $p8;
      transform: translateX(-$p32);
      cursor: pointer;
      opacity: 1;
    }

    &-input {
      &:focus {
        .api-tag-select-btn {
          transform: translateX(0);
        }
      }
    }
  }
}

.api-resource-tag-select {
  .tag-option {
    &-btn {
      opacity: 0;
    }

    &:hover {
      .tag-option-btn {
        opacity: 1;
      }
    }
  }
}
