@use "sass:map";
@use "sass:list";

// Variables
$primary-color: #243dc6;
$text-color: #2d2d2d;
$background-color: #ffffff;
$border-radius: 8px;
$input-border: #e0e0e0;
$error-color: #e53935;
$hint-color: #7d7d7d;
$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);

// Sidebar Overlay
.minicart__overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: transparent;
  z-index: 9999;
}

.minicart_container {
  position: fixed;
  top: 0;
  right: 0;
  width: 125px;
  max-width: 100%;
  height: 100vh;
  background: var(--_base-white);
  box-shadow: $shadow;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  animation: slide-in 0.3s ease-out;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  @keyframes slide-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
}

// Sidebar Header
.minicart_header {
  padding-top: 6px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  .mincart_close_btn {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    cursor: pointer;
    svg {
      margin-right: 8px;
      width: 18px;
      height: 18px;
      path {
        stroke: var(--_gray-600);
      }
    }
    &:hover {
      svg path {
        stroke: var(--_gray-900);
      }
    }
  }

  h2 {
    font-size: 18px;
    font-weight: 600;
    color: $text-color;
    margin: 0;
  }

  .close__btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;

    svg {
      width: 24px;
      height: 24px;
    }
  }
  .text_label {
    padding: 6px 16px;
    background-color: var(--_gray-100);
    width: 100%;
    text-align: center;
  }
}

.mincart_items {
  .cart_popup {
    background-color: #fff;
  }

  .cart_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 16px;
    &:hover {
    }
    .product_img {
      width: 64px !important;
      height: 64px !important;
    }
    .item_info {
      text-align: center;
    }

    .item_title {
      font-weight: 500;
      margin-bottom: 4px;
      text-align: center;
    }

    .item_price {
      font-weight: 700;
      text-align: center;
    }

    .item_image {
    }
    .item_action_btn {
      padding: 8px;
      color: var(--_thm-cs-tt-ls-as);
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      cursor: pointer;

      &:hover {
        background-color: var(--_primary-50);
        color: var(--_thm-cs-tt-ls-as);
      }
    }
  }
}

// Sidebar Footer
.sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid #eee;

  .discard__btn {
    background: none;
    border: none;
    color: $text-color;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .share__btn {
    background: $primary-color;
    color: $background-color;
    border: none;
    padding: 10px 16px;
    border-radius: $border-radius;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;

    &:hover {
      background: color-mix(in srgb, #243dc6 95%, transparent 5%);
    }
  }
}

.minicart_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  .total_label {
  }

  .total_price {
    font-weight: 700;
  }

  .view_cart_btn {
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
}