@mixin base-btn {
  --font-size: 14px;
  --border-radius: 6px;
  --button-height: 40px;
  --focus-shadow: 0 0 0 0 transparent;
  --btn-disabled-bg: var(--color-dis-01);
  --color-text: var(--txt-00);
  --shape-shadow: 0 0 0 0 transparent;
  --append-shadow: 0 0 0 0 transparent;
  --drop-shadow: 0 0 0 0 transparent;
  --active-shadow: 0 0 0 0 transparent;
  --main-padding: 0 12px;

  text-transform: capitalize;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
  padding: var(--main-padding);
  color: var(--color-text);

  font-weight: 600;
  font-size: var(--font-size);
  font-family: var(--font-family-base);
  line-height: 16px;

  height: var(--button-height);
  min-height: var(--button-height);
  border-radius: var(--border-radius);

  outline: none;
  user-select: none;

  transition: box-shadow 0.05s ease-in-out;

  box-shadow:
    var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow),
    var(--drop-shadow);

  // @todo
  &.justifyCenter {
    justify-content: center;
  }

  &.round {
    border-radius: 50%;
    width: var(--button-height);
    min-width: var(--button-height);
    padding: 0;
    justify-content: center;
  }

  &.small {
    --button-height: 32px;
    --main-padding: 0 8px;
  }

  &.medium {
    --main-padding: 0 16px;
  }

  &.large {
    --button-height: 56px;
    --border-radius: 8px;
    --font-size: 16px;
    --main-padding: 0 18px;

    .mask {
      --mask-size: 24px;
    }
  }

  &:disabled {
    --color-text: var(--dis-00);
    --icon-color: var(--dis-00);

    * {
      color: var(--color-text);
    }
  }

  &:not([disabled]) {
    cursor: pointer;
  }

  &:not([disabled]).hover {
    background: var(--color-btn-hover);
  }

  &:not([disabled]):hover {
    background: var(--color-btn-hover);
  }

  &:focus-visible {
    --focus-shadow: inset 0 0 0 2px var(--border-color-focus);
  }

  .icon {
    display: block;
    width: 16px;
    height: 16px;
  }

  &.loading {
    box-shadow: none !important;

    .mask-loading {
      display: block;
      animation: spin 4s linear infinite;
    }
  }

  &.reverse {
    flex-direction: row-reverse;
  }

  > span {
    display: inline-flex;
  }
}