.action-bar-wrapper-box {
  width: 100%;
  overflow-y: hidden;
}

@mixin action-bar(
  $bg-color: #e2e2e2,
  $padding: $base-padding $base-padding,
  $radius: $base-border-radius
) {
  // width: 100%;
  font-size: 1.25rem;
  // padding: $padding;
  //   border-radius: $radius;
  display: flex;
  align-items: center;
  //   grid-template-columns: ;
  gap: 2rem;
  background: #fff6ed;
  max-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: all 0.5s linear-bezier(0, 1.05, 0, 1);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  width: 100%;

  .img-box {
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(0.2rem);
    .img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  .text {
    font-size: 1.3rem;
    color: #020202;
  }

  .action-box {
    margin-right: auto;
    display: flex;
    align-items: center;
    cursor: pointer;

    &:hover .arrow-icon {
      transform: translateX(0.2rem);
    }

    .text {
      font-weight: 700;
      margin-right: 1rem;
      font-size: 1.4rem;
    }

    .arrow-icon {
      border-radius: 50%;
      width: 1.8rem;
      height: 1.8rem;
      display: grid;
      place-items: center;
      transition: all 0.3s;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 170%;
        height: 170%;
        border-radius: 50%;
        // background-color: green;
        z-index: 1;
      }

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        // background-color: red;
        z-index: 2;
      }

      & > * {
        z-index: 3;
      }

      .icon {
        width: 1rem;
        height: 1rem;
        color: #ffffff;
        fill: #ffffff;
      }
    }
  }

  .cancel {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    // margin-left: auto;
    cursor: pointer;

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

@each $key, $val in $colors {
  .action_bar__error {
    @include action-bar;
    background-color: #fff5f5;

    .cancel {
      background-color: #ffdfdd;
      svg {
        fill: #ff0f00;
      }
    }

    .action-box {
      .text {
        color: #ff0f00;
      }

      .arrow-icon {
        &::after {
          background-color: #ffdfdd;
        }

        &::before {
          background-color: #ff0f00;
        }
      }
    }
  }

  //   .action_bar-success {
  //     @include action-bar;
  //     background: #d1f5d7 !important;
  //     // border: 0.15rem solid #b3efbc !important;

  //     .cancel {
  //       background-color: #b3efbc;
  //       svg {
  //         fill: #1ace37;
  //       }
  //     }
  //   }

  .action_bar__info {
    @include action-bar;
    background: #e9f5ff !important;

    .cancel {
      background-color: #b9defe;
      svg {
        fill: #476885;
      }
    }

    .action-box {
      .text {
        color: #476885;
      }

      .arrow-icon {
        &::after {
          background-color: #b9defe;
        }

        &::before {
          background-color: #476885;
        }
      }
    }
  }

  .action_bar__warning {
    @include action-bar;
    background: #fff6ed !important;

    .cancel {
      background-color: #ffe6cd;
      svg {
        fill: #ea872d;
      }
    }

    .action-box {
      .text {
        color: #ea872d;
      }

      .arrow-icon {
        &::after {
          background-color: #ffe6cd;
        }

        &::before {
          background-color: #ea872d;
        }
      }
    }
  }

  .action_bar_show {
    padding: $base-padding $base-padding;
    max-height: 7rem;
    transition: all 0.5s linear-bezier(0, 1.05, 0, 1);
  }

  .action_bar__transform {
    transform: translateY(-100%);
  }
}

@keyframes translateActionUp {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}