@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

// how to use for buttons for theming
// primary => .thm__btn.btn__sm.primary
// secondary => .thm__btn.btn__md.secondary
// tertiary => .thm__btn.btn__lg.tertiary

@function getPropertyValueV1($type: "py", $prop: "bg", $state: "dt") {
  $keys: (
    "bg": "--_thm-#{$type}-bs-#{$state}-se-bd-cr",
    "ft": "--_thm-#{$type}-bs-#{$state}-se-tt-cr",
  );
  @return map.get($keys, $prop);
}

$data: (
  size: (
    btn__sm: (
      padding: 12px 24px,
      font-size: 14px,
    ),
    btn__md: (
      padding: 12px 24px,
      font-size: 14px,
    ),
    btn__lg: (
      padding: 12px 24px,
      font-size: 14px,
    ),
  ),
  commonKeys: (
    primary: "py",
    secondary: "sy",
    tertiary: "ty",
  ),
);
.thm__btn {
  border-radius: var(--_thm-py-bs-dt-se-br-rs);
  display: flex;
  align-items: center;
  @each $k1, $k2 in $data {
    @if ($k1 == "size") {
      @each $sizeKey, $sizeValue in $k2 {
        &.#{$sizeKey} {
          @each $propKey, $propValue in $sizeValue {
            #{$propKey}: $propValue;
          }
        }
      }
    }
    @if ($k1 == "commonKeys") {
      @each $typeKey, $typeValue in $k2 {
        &.#{$typeKey} {
          background-color: var(
            --_sf-bg-clr,
            #{prepareMediaVariable(getPropertyValueV1($typeValue, "bg", "dt"))}
          );
          color: var(
            --_sf-ft-clr,
            #{prepareMediaVariable(getPropertyValueV1($typeValue, "ft", "dt"))}
          );
          &:hover {
            --_sf-bg-clr: #{prepareMediaVariable(getPropertyValueV1($typeValue, "bg", "hr"))};
            --_sf-ft-clr: #{prepareMediaVariable(getPropertyValueV1($typeValue, "ft", "hr"))};
          }
        }
      }
    }
  }
  &:has(svg) {
    gap: 8px;
  }
  //   &.danger {
  //     background-color: var(--_error-700);
  //     color: var(--_base-white);
  //     &:hover {
  //       @include BgColorLighter(var(--_error-700), 90%);
  //     }
  //   }
  //   &.danger.tertiary {
  //     background-color: transparent;
  //     color: var(--_error-700);
  //     &:hover {
  //       @include BgColorLighter(var(--_error-700), 10%);
  //     }
  //   }
}

// common transitions
@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(10);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  to {
    transform: translateY(0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

// ===== Checkout skeletons for single and buyfor and buyAs checkouts started ===== //

.address_skeletons {
  display: flex;
  gap: 12px;
  &:not(:last-child) {
    margin-bottom: 6px;
  }
}

.sr_skeletons {
  padding-block: 12px;
  .sr_add_name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .sr_address {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .sr_contact {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }
}

.gift_card_skeletons {
  border: 1px solid var(--_gray-200);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  .gift_card_skeleton_details {
    display: flex;
    gap: 8px;
    flex-direction: column;
    width: 100%;
  }
}

.checkout_steps_skeleton {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.chk_billing_address_skeleton {
  .bg__as__ss__hr {
    padding-block: 16px;
    border-bottom: 1px solid var(--_gray-200);
  }
  .bg__as__ss__by {
    padding-block: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    .select__shipping__address {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .select__shipping__address__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
    }
  }
}

.pmnt__options_skltns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  & > div {
    display: flex;
    gap: 16px;
    align-items: center;
  }
}
.sg__md__sn {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 12px;
  .sg_md_gp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    .sg_md_gp_lt {
      display: flex;
      flex-direction: column;
      gap: 6px;
      & > div {
        display: flex;
        align-items: center;
        gap: 6px;
      }
    }
  }
}

.summary_content_skeletons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;

  & > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .address_line {
      display: flex;
      gap: 8px;
    }
  }
}

.pmnt__md__sn {
  border: 1px solid var(--_gray-200);
  border-radius: 6px;
  .pmnt__md__sn__hr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 0px 16px;
    border-bottom: 1px solid var(--_gray-200);
  }
  .pmnt__md__sn__body {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px 16px 16px;

    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      & > div {
        display: flex;
        gap: 12px;
        width: 100%;
      }
    }
  }
}

// ===== Checkout skeletons for single and buyfor and buyAs checkouts end ===== //
// ===== Checkout skeletons for single and buyfor and buyAs checkouts end ===== //
.rotate__180 {
  transform: rotate(180deg);
  transition: all 400ms ease-in;
  display: flex;
}
.rotate__0 {
  transform: rotate(0deg);
  transition: all 400ms ease-in;
  display: flex;
}
// Error Message
.error_msg {
  font-size: 12px;
  color: var(--_error-500);
}