.cdp_btn-success {
  @include wrapper_row;
  @include font-16;
  height: $height-ip2;
  background: $valid-color;
  box-shadow: inset 0px -3px 0px rgba(31, 31, 61, 0.24);
  border-radius: 8px;
  font-style: normal;
  font-weight: bold;
  color: $grey-9;
  align-items: center;
  align-content: center;
  padding: 9px 16px;

  &:hover, &:focus {
    background: $bg-green-1;
    color: $grey-9;
    border-color: $bg-green-1;
  }
}


.cdp_btn-error {
  @include wrapper_row;
  @include font-16;
  height: $height-ip2;
  background: $bg-red-3;
  border-radius: 8px;
  font-style: normal;
  font-weight: bold;
  color: $text-color-2;
  align-items: center;
  align-content: center;
  padding: 9px 16px;

  &:hover, &:focus {
    background: $bg-red-3;
    color: $text-color-2;
    border-color: $bg-red-3;
  }
}


.cdp_btn-primary {
  /* Auto Layout */

  @include wrapper_row;
  align-items: center;
  align-content: center;
  height: $height-ip2;

  background: #2E9BD1;
  border-radius: 4px;

  font-style: normal;
  font-weight: bold;
  @include font-16;
  color: $grey-9;


  &:hover, &:focus {
    background: #2E9BD1;
    color: $grey-9;
  }
}

.cdp_btn-warning {
  @include wrapper_row;
  align-items: center;
  align-content: center;
  height: $height-ip2;

  background: #FDA635;
  border-radius: 4px;

  font-style: normal;
  font-weight: bold;
  @include font-16;
  color: $grey-9;

  &:hover, &:focus {
    background: #FDA635;
    color: $grey-9;
  }
}

.cdp_btn_ds-warning-ic {
  @include wrapper_row;
  align-items: center;
  align-content: center;
  height: $height-ip2;

  background: #FEE9E2;
  border-radius: 8px;
  border: 1px solid #F8A996;

  font-style: normal;
  font-weight: bold;
  @include font-16;
  color: $text-color-2;


  &:hover, &:focus {
    background: #FEE9E2;
    color: $text-color-2;
  }
}

.cdp_btn-outline {
  height: $height-ip2;
  background: $grey-9;
  border: 1px solid $grey-4;
  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px $grey-7;
  border-radius: 8px;

  font-style: normal;
  font-weight: bold;
  @include font-16;

  display: flex;
  align-items: center;
  text-align: center;

  //color: $green-color-1;
  color: $grey-3;

  &:hover, &:focus {
    background: $grey-9;
    color: $grey-3;
  }
}

.cdp_btn-outline-error {
  height: $height-ip2;
  font-style: normal;
  font-weight: bold;
  @include font-16;

  display: flex;
  align-items: center;
  text-align: center;

  background: $grey-9;
  border: 1px solid $border-color-2;
  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px rgba(251, 134, 75, 0.48);
  border-radius: 8px;
  color: $text-color-2;
  padding: 9px 16px;

  &:hover, &:focus {
    background: $grey-9;
    color: $text-color-2;
    border-color: $border-color-2;
  }
}

.cdp_btn-outline-green {
  height: $height-ip2;
  font-style: normal;
  font-weight: bold;
  @include font-16;

  display: flex;
  align-items: center;
  text-align: center;
  background: $grey-9;
  box-sizing: border-box;
  border-radius: 8px;

  text-transform: capitalize;
  color: $primary-2;
  border: 1px solid $primary-2;
  box-shadow: inset 0px -3px 0px rgba(189, 223, 109, 0.6);

  padding: 9px 16px;

  &:hover, &:focus {
    background: $grey-9;
    color: $primary-2;
    border-color: $primary-3;
  }
}

.cdp_btn-default {
  //padding: 9px 16px;

  //width: 166px;
  height: $height-ip2;

  background: $grey-9;
  border: 1px solid $grey-4;
  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px $grey-7;
  border-radius: 8px;

  font-style: normal;
  font-weight: bold;
  @include font-16;

  display: flex;
  align-items: center;
  text-align: center;

  color: $grey-3;
  padding: 9px 16px;

  &:hover, &:focus {
    background: $grey-9;
    color: $grey-3;
  }
}

.cdp_btn-gray {
  height: $height-ip2;
  background: #B7B7B8;
  border: 1px solid $grey-5;
  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px rgba(31, 31, 61, 0.24);
  border-radius: 8px;

  font-style: normal;
  font-weight: bold;
  @include font-16;
  display: flex;
  align-items: center;
  text-align: center;
  color: #FFFFFF;

  &:hover, &:focus {
    background: #B7B7B8;
    color: #FFFFFF;
  }
}

.cdp_btn-background {
  @include wrapper_row;
  height: $height-ip2;

  background: $valid-color;
  border: 1px solid $valid-color;

  box-shadow: inset 0 -3px 0 rgba(31, 31, 61, 0.24);
  border-radius: 8px;

  font-style: normal;
  font-weight: bold;
  @include font-16;
  align-items: center;
  text-align: center;
  color: $grey-9;


  padding: 9px 16px;

  &:hover, &:focus {
    background: $valid-color;
    color: $grey-9;
    border: 1px solid $valid-color;

  }
}

.cdp_btn-border {
  @include wrapper_row;
  height: $height-ip1;

  background: $grey-9;
  border: 1px solid $grey-7;

  border-radius: 3px;

  padding: 9px 16px;

  &:hover, &:focus {
    background: $grey-9;
    color: $grey-9;
    border: 1px solid $blue-2;
    cursor: pointer;
  }
}

.cdp__btn-group--tabs {
  @include wrapper_row;
  align-items: center;

  label span:last-child {
    font-weight: normal;
    color: $grey-3;
  }

  .cdp__btn-group--tabs-item {
    @include wrapper_row;
    @include font-16;
    align-items: center;
    height: $height-ip2;
    background: $grey-8;

    border: 1px solid $grey-5;
    box-sizing: border-box;
    color: $grey-3;

    &.left {
      border-radius: 8px 0 0 8px;

      &:before, &:hover:before {
        background-color: $grey-5;
      }
    }

    &.center {
      border-left: 0;
      border-radius: 0;

      &:before, &:hover:before {
        background-color: $grey-5;
      }
    }

    &.right {
      border-left: 0;
      border-radius: 0 8px 8px 0;

      &:before, &:hover:before {
        background-color: $grey-5;
      }
    }

    &.active {
      font-weight: bold;
      background: $orange-2;
      color: $grey-9;
      box-shadow: inset 0 3px 0 rgba(31, 31, 61, 0.24);

      span:last-child {
        font-weight: bold;
        color: $grey-9;
      }
    }


  }
}

.btn-and--small {
  background: $text-link-color-1;
  border-radius: 4px;
  @include font-12;
  font-weight: bold;
  text-transform: uppercase;
  color: $grey-9;
  height: 24px;

  &:hover, &:focus {
    background: $text-link-color-1;
    color: $grey-9;
    border: 1px solid $text-link-color-1;
  }
}

.btn-event--small {
  background: $green-color-2;
  border-radius: 4px;
  @include font-12;
  font-weight: bold;
  text-transform: uppercase;
  color: $grey-9;
  height: 24px;
  padding: 3px 8px;
  display: flex;
  align-items: center;

  &:hover, &:focus {
    background: $primary-3;
    color: $grey-9;
    border: 1px solid $primary-3;
  }
}

.btn-or--small {
  background: $orange-2;
  border-radius: 4px;
  @include font-12;
  font-weight: bold;
  text-transform: uppercase;
  color: $grey-9;
  height: 24px;
  padding: 3px 8px;

  &:hover, &:focus {
    background: $orange-2;
    color: $grey-9;
    border: 1px solid $orange-2;
  }
}

.btn-empty--small {
  @include f-center;
  border-radius: 4px;
  background: $grey-3;
  font-weight: bold;
  text-transform: uppercase;
  color: $grey-9;
  height: 24px;

  span {
    @include font-12;
    margin-left: 4px;
  }

  &:hover, &:focus {
    background: $grey-3;
    color: $grey-9;
    border: 1px solid $grey-3;
  }

}

.btn-small-size {
  height: 24px;
  padding: 3px 8px;
  @include font-12;
  font-weight: bold;
  text-transform: uppercase;
}

.btn-copy {
  @include font-12;
  @include f-center;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  color: $line-color-2;

  svg {
    color: $text-link-color-1;
    margin-right: 4px;
  }
}

.shorten-link-btn {
  @include font-12;
  @include f-center;
  font-weight: bold;
  color: $grey-5;
  text-transform: uppercase;
  transition: all 0.2s ease;

  &.active {
    color: $border-color-1;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  &.deactive {
    cursor: not-allowed;
    color: #8D8D91;
  }
}

.cdp-btn__step-action {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  @include font-12;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;

  &--add-event {
    background: $primary-3;
    color: #ffffff;

    &:hover, &:active, &:focus {
      background: $primary-3;
      color: #ffffff;
    }
  }

  &--add-not-event {
    background: $grey-6;
    color: $grey-2;

    &:hover, &:active, &:focus {
      background: $grey-6;
      color: $grey-2;
    }
  }

  &--add-single {
    background: $primary-2;
    color: #ffffff;

    &:hover, &:active, &:focus {
      background: $primary-2;
      color: #ffffff;
    }
  }

  &--add-not-single {
    background: #8D342A;
    color: #ffffff;

    &:hover, &:active, &:focus {
      background: #8D342A;
      color: #ffffff;
    }
  }

  &--remove-step {
    background: #FDEBD8;
    color: #8D342A;

    &:hover, &:active, &:focus {
      background: #FDEBD8;
      color: #8D342A;
    }
  }

  &--close {
    background: #F3573F;
    color: #ffffff;

    &:hover, &:active, &:focus {
      background: #F3573F;
      color: #ffffff;
    }
  }

}

@media screen and (min-width: $hd_screen_minus_165) and (max-width: $hd_screen_plus_75) {
  .cdp__btn-group--tabs-item,
  .cdp_btn-success,
  .cdp_btn-error,
  .cdp_btn-primary,
  .cdp_btn-warning,
  .cdp_btn_ds-warning-ic,
  .cdp_btn-outline,
  .cdp_btn-outline-error,
  .cdp_btn-outline-green,
  .cdp_btn-default,
  .cdp_btn-gray,
  .cdp_btn-background,
  .input-style,
  .cdp-dropdown-opt__btn,
  .#{$cdp-block-condition}__main-content-tag,
  .#{$cdp-block-condition}__main-content-option {
    height: $height-btn2 !important;
  }

  .btn-empty--small, .btn-and--small, .btn-or--small, cdp-btn__step-action {
    height: 32px;
    padding: 5px 12px
  }
}

.btn-link {
  &.uppercase {
    @include font-12;
    font-weight: bold;
    text-transform: uppercase;
  }

  &.blue {
    color: $blue-1;
  }

  &.grey {
    color: $grey-2;
  }

  &.primary {
    color: $primary-2;
  }
}