.button {
  background-color: unset;
  border-radius: 8px;
  border: none;
  outline: none;
  transition-property: color, background-color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

/* SIZE */
.button.size-2xl {
  /* text-body2  */
  font-size: var(--body2-font-size);
  line-height: var(--body2-line-height);
  letter-spacing: var(--body2-letter-spacing);

  height: 64px;
  min-width: 64px;
  padding-inline: 24px;
}
.button.size-xl {
  /* text-body2  */
  font-size: var(--body2-font-size);
  line-height: var(--body2-line-height);
  letter-spacing: var(--body2-letter-spacing);

  height: 56px;
  min-width: 56px;
  padding-inline: 20px;
}
.button.size-l {
  /* text-body2  */
  font-size: var(--body2-font-size);
  line-height: var(--body2-line-height);
  letter-spacing: var(--body2-letter-spacing);

  height: 48px;
  min-width: 48px;
  padding-inline: 18px;
}
.button.size-m {
  /* text-body2  */
  font-size: var(--body2-font-size);
  line-height: var(--body2-line-height);
  letter-spacing: var(--body2-letter-spacing);

  height: 44px;
  min-width: 44px;
  padding-inline: 16px;
}
.button.size-s {
  /* text-body2  */
  font-size: var(--body2-font-size);
  line-height: var(--body2-line-height);
  letter-spacing: var(--body2-letter-spacing);

  height: 40px;
  min-width: 40px;
  padding-inline: 16px;
}
.button.size-xs {
  /* text-caption1  */
  font-size: var(--caption1-font-size);
  line-height: var(--caption1-line-height);
  letter-spacing: var(--caption1-letter-spacing);

  height: 36px;
  min-width: 36px;
  padding-inline: 14px;
}

/* Hug Content / Fill Container */
.button {
  &.hug {
    width: fit-content;
  }
  &.fill {
    width: 100%;
  }
}

/* STATUS PRIMARY */
.button.status-primary {
  &:focus-visible {
    /* outline-border-2px-blue-focused */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Primary-Blue-500);
  }

  &.hierarchy-primary {
    background-color: var(--brand-primary-blue-700-main);
    color: var(--brand-bw-white);
    border: 0;

    &:hover {
      background-color: var(--Brand-Primary-Blue-600);
    }
    &:disabled {
      background-color: var(--Brand-Gray-50);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-tertiary {
    background-color: var(--brand-bw-white);
    border: 1px solid var(--Brand-Primary-Blue-500);
    color: var(--brand-primary-blue-700-main);

    &:hover {
      background-color: var(--Brand-Gray-25);
    }
    &:disabled {
      background-color: var(--brand-bw-white);
      border-color: var(--Brand-Gray-300);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-ghost {
    color: var(--brand-primary-blue-700-main);

    &:hover {
      background-color: var(--Brand-Primary-Blue-25);
    }
    &:disabled {
      background-color: transparent;
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-link {
    min-width: unset;
    width: fit-content;
    height: fit-content;
    padding-inline: 0;
    color: var(--brand-primary-blue-700-main);

    &:hover {
      color: var(--Brand-Primary-Blue-500);
    }
    &:disabled {
      color: var(--Brand-Gray-500);
    }
  }
}

/* STATUS SECONDARY */
.button.status-secondary {
  &:focus-visible {
    /* outline-border-2px-pink-focused  */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--brand-secondary-pink-500-main);
  }

  &.hierarchy-primary {
    background-color: var(--brand-secondary-pink-500-main);
    color: var(--brand-bw-white);

    &:hover {
      background-color: var(--Brand-Secondary-Pink-400);
    }
    &:disabled {
      background-color: var(--Brand-Gray-50);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-tertiary {
    background-color: var(--brand-bw-white);
    border: 1px solid var(--Brand-Secondary-Pink-400);
    color: var(--brand-secondary-pink-500-main);

    &:hover {
      background-color: var(--Brand-Gray-25);
    }
    &:disabled {
      background-color: var(--brand-bw-white);
      border-color: var(--Brand-Gray-300);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-ghost {
    color: var(--brand-secondary-pink-500-main);

    &:hover {
      background-color: var(--Brand-Secondary-Pink-25);
    }
    &:disabled {
      background-color: transparent;
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-link {
    min-width: unset;
    width: fit-content;
    height: fit-content;
    padding-inline: 0;
    color: var(--brand-secondary-pink-500-main);

    &:hover {
      color: var(--Brand-Secondary-Pink-400);
    }
    &:disabled {
      color: var(--Brand-Gray-500);
    }
  }
}

/* STATUS TERTIARY */
.button.status-tertiary {
  &:focus-visible {
    /* outline-border-2px-gray-focused */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Gray-600);
  }

  &.hierarchy-tertiary {
    background-color: var(--brand-bw-white);
    border: 1px solid var(--Brand-Gray-600);
    color: var(--Brand-Gray-800);

    &:hover {
      background-color: var(--Brand-Gray-25);
    }
    &:disabled {
      background-color: var(--brand-bw-white);
      border-color: var(--Brand-Gray-300);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-tertiary-on-gray {
    background-color: var(--Brand-Gray-25);
    border: 1px solid var(--Brand-Gray-600);
    color: var(--Brand-Gray-800);

    &:hover {
      background-color: var(--brand-bw-white);
    }
    &:disabled {
      background-color: var(--Brand-Gray-25);
      border-color: var(--Brand-Gray-300);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-ghost {
    color: var(--Brand-Gray-800);

    &:hover {
      background-color: var(--Brand-Gray-30);
    }
    &:disabled {
      background-color: transparent;
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-link {
    min-width: unset;
    width: fit-content;
    height: fit-content;
    padding-inline: 0;
    color: var(--Brand-Gray-800);

    &:hover {
      color: var(--Brand-Gray-500);
    }
    &:disabled {
      color: var(--Brand-Gray-500);
    }
  }
}

/* STATUS ERROR */
.button.status-error {
  &:focus-visible {
    /* outline-border-2px-error-focused */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--brand-error-500-main);
  }

  &.hierarchy-primary {
    background-color: var(--brand-error-500-main);
    color: var(--brand-bw-white);

    &:hover {
      background-color: var(--Brand-Error-400);
    }
    &:disabled {
      background-color: var(--Brand-Gray-50);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-tertiary {
    background-color: var(--brand-bw-white);
    border: 1px solid var(--Brand-Error-400);
    color: var(--brand-error-500-main);

    &:hover {
      background-color: var(--Brand-Gray-25);
      border-color: var(--brand-error-500-main);
    }
    &:disabled {
      background-color: var(--brand-bw-white);
      border-color: var(--Brand-Gray-300);
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-ghost {
    color: var(--brand-error-500-main);

    &:hover {
      background-color: var(--Brand-Error-50);
    }
    &:disabled {
      background-color: transparent;
      color: var(--Brand-Gray-500);
    }
  }
  &.hierarchy-link {
    min-width: unset;
    width: fit-content;
    height: fit-content;
    padding-inline: 0;
    color: var(--brand-error-500-main);

    &:hover {
      color: var(--Brand-Error-400);
    }
    &:disabled {
      color: var(--Brand-Gray-500);
    }
  }
}

.button[icon-leading] {
  flex-direction: row-reverse;
}
.button[icon] {
  justify-content: space-between;
  gap: 10px;

  &::after {
    content: '';
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: currentColor;
  }

  &.size-2xl,
  &.size-xl,
  &.size-l {
    &::after {
      width: 20px;
      height: 20px;
    }
  }
  &.size-m,
  &.size-s {
    &::after {
      width: 16px;
      height: 16px;
    }
  }
  &.size-xs {
    &::after {
      width: 14px;
      height: 14px;
    }
  }
}
.button {
  &[icon='arrow-right'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Arrow_Right.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Arrow_Right.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Arrow_Right.svg');
      }
    }
  }
  &[icon='arrow-left'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Arrow_Left.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Arrow_Left.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Arrow_Left.svg');
      }
    }
  }
  &[icon='plus'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Plus.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Plus.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Plus.svg');
      }
    }
  }
  &[icon='minus'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Minus.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Minus.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Minus.svg');
      }
    }
  }
  &[icon='search'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Search.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Search.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/16px/Search.svg'); /* Search icon 沒有 14px 的 */
      }
    }
  }
  &[icon='chevron-down'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Chevon_Down.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Chevon_Down.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Chevon_Down.svg');
      }
    }
  }
  &[icon='chevron-up'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Chevon_Up.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Chevon_Up.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Chevon_Up.svg');
      }
    }
  }
  &[icon='trash'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Trash.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Trash.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Trash.svg');
      }
    }
  }
  &[icon='download'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Download.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Download.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Download.svg');
      }
    }
  }
  &[icon='info-lined'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Info_Lined.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Info_Lined.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Info_Lined.svg');
      }
    }
  }
  &[icon='grid'] {
    &.size-2xl,
    &.size-xl,
    &.size-l {
      &::after {
        mask-image: url('/assets/icons/20px/Grid.svg');
      }
    }
    &.size-m,
    &.size-s {
      &::after {
        mask-image: url('/assets/icons/16px/Grid.svg');
      }
    }
    &.size-xs {
      &::after {
        mask-image: url('/assets/icons/14px/Grid.svg');
      }
    }
  }
}