@prefix: api-method;

.@{prefix} {
  &- {
    &root {
      position: relative;
      border-radius: 4px;
    }

    &overlay {
      border-radius: 4px;
      overflow: hidden;
    }

    &box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 65px;
      height: 30px;
      font-weight: bold;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.45);
      user-select: none;
      filter: brightness(1);
      transition: all 300ms;

      &.editable:hover {
        filter: brightness(1.2);
      }
    }

    &get {
      background-color: #7cb305;
    }

    &post {
      background-color: #ffa446;
    }

    &put {
      background-color: #20c2ff;
    }

    &delete {
      background-color: #f34d4d;
    }


    &small {
      font-size: 12px;
      width: 55px;
      height: 25px;
    }

    &x-small {
      font-size: 12px;
      width: 50px;
      height: 22px;
    }

    &middle {
    }

    &large {
      width: 76px;
      height: 36px;
      padding: 0px 16px;
      font-size: 18px;
    }

  }
}