@keyframes wpc-spinner {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes wpc-spinner {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes wpcot-spinner {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes wpcot-spinner {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.wpcot-tips {
  .wpcot-tip {
    padding: 10px 0;

    .wpcot-tip-name {
      font-weight: 700;
    }

    .wpcot-tip-values {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-left: -5px;
      margin-right: -5px;

      .wpcot-tip-value, .wpcot-tip-value-custom {
        line-height: 1;
        margin: 5px;
        border: 1px solid #dddddd;
        padding: 2px;
        cursor: pointer;

        > span {
          display: inline-block;
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          background-color: #eeeeee;
        }

        &:hover, &.active {
          border-color: #458746;

          > span {
            color: #ffffff;
            background-color: #458746;
          }
        }

        &.loading {
          position: relative;

          &:before {
            width: 20px;
            height: 20px;
            display: block;
            margin-top: -10px;
            margin-left: -10px;
            content: '';
            background-image: url("../images/curve.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 8;
            -webkit-animation: wpcot-spinner 1s linear infinite;
            -moz-animation: wpcot-spinner 1s linear infinite;
            -ms-animation: wpcot-spinner 1s linear infinite;
            -o-animation: wpcot-spinner 1s linear infinite;
            animation: wpcot-spinner 1s linear infinite;
          }

          > span {
            opacity: .3;
          }
        }
      }
    }

    .wpcot-tip-custom {
      display: none;

      .wpcot-tip-custom-form {
        display: flex;
        align-items: center;

        .wpcot-tip-custom-form-inner {
          line-height: 1;
          border: 1px solid #dddddd;
          padding: 2px;
          display: flex;
          align-items: center;
        }

        input {
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          border: none;
          background-color: #eeeeee;
          border-radius: 0;
          font-weight: normal;
          outline: none;

          &[type="button"] {
            margin-left: 2px;

            &:hover {
              color: #ffffff;
              background-color: #458746;
            }
          }
        }

        &.disabled {
          pointer-events: none;
        }
      }
    }
  }

  &.wpcot-btn-rounded {
    .wpcot-tip-value, .wpcot-tip-value-custom, .wpcot-tip-custom-form-inner {
      border-radius: 100px !important;

      > span, input {
        padding: 0 15px !important;
        border-radius: 100px !important;
      }
    }
  }
}