@mixin btn(
  $bg-color: #e2e2e2,
  $padding: $base-padding $base-padding * 2,
  $radius: $base-btn-border-radius
) {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: none;
  padding: $padding;
  border-radius: $radius;
  // background-color: $bg-color;
  width: max-content;
  outline: none;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  font-size: 1.4rem;
  font-weight: 500;

  &:hover {
    transform: translateY(-0.1rem);
    opacity: 0.9;
  }

  // &:hover .img-box {
  //   transform: translateX(0.1rem);
  // }

  .blocks-wrapper{
    // display: ;
    margin-left: .5rem;
   transform: scale(2.5);
  }
}



// mixin for round btn
@mixin btn_rounded() {
  display: grid;
  place-items: center;
  height: 5rem;
  width: 5rem;

  .img-box {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    align-self: center;
    display: none;

    .img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
}

// mixin for btn with icon
@mixin btn-icon() {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: max-content;

  svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

// mixin for btn with icon
@mixin btn_extend() {
  font-weight: 600;

  svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

// mixin for disabled btn
@mixin btn_disabled {
  opacity: 0.5 !important;
  cursor: default !important;

  &:hover {
    transform: unset !important;
  }
}

.raven-btn {
  @include btn;
  @include btn-icon;

  .img-box {
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    align-self: center;
    transition: all 0.3s;
    // display: none;
  
    .img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
  
  .img-box-two {
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    align-self: center;
    transition: all 0.3s;
    // display: none;
  
    .img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
  
  .img-cancel{
    width: 1.3rem;
    height: 1.3rem;
  }
}

//  buttons colors
@each $key, $val in $colors {
  .btn-sm {
    @include btn($val, 1.1rem 2.4rem);
    @include btn-icon;
  }

  .btn-md {
    @include btn($val, 1.6rem 2.4rem);
    @include btn-icon;
  }

  .btn-lg {
    @include btn($val, 2rem 5.6rem);
    @include btn-icon;
  }

  .btn-rounded {
    @include btn($val, 0, 50%);
    @include btn-rounded;
  }

  .btn-extended {
    @include btn($val, 1.6rem, 10rem);
    @include btn-icon;
    @include btn-extend();
  }

  .btn-#{$key} {
    background-color: $val;
  }

  .btn-outline-#{$key} {
    border: $base-border-thickness solid $val !important;
    background-color: #ffffff;
  }

  .btn_disabled {
    @include btn_disabled;
  }
}