.btn {
  --_op-btn-height-small: 4rem; /* 40px */
  --_op-btn-height-medium: 4.4rem; /* 44px */
  --_op-btn-height-large: 5rem; /* 50px */
  --_op-btn-height-x-large: 6rem; /* 60px */
  --_op-btn-font-small: var(--op-font-small);
  --_op-btn-font-medium: var(--op-font-medium);
  --_op-btn-font-large: var(--op-font-medium);
  --_op-btn-font-x-large: var(--op-font-large);
  --_op-btn-padding-small: 0 var(--op-space-medium);
  --_op-btn-padding-medium: 0 var(--op-space-large);
  --_op-btn-padding-large: 0 var(--op-space-large);
  --_op-btn-padding-x-large: 0 var(--op-space-x-large);

  --__op-btn-height: var(--_op-btn-height-medium);
  --__op-btn-font-size: var(--_op-btn-font-medium);
  --__op-btn-padding: var(--_op-btn-padding-medium);

  &.btn--x-large {
    --__op-btn-height: var(--_op-btn-height-x-large);
    --__op-btn-font-size: var(--_op-btn-font-x-large);
    --__op-btn-padding: var(--_op-btn-padding-x-large);
  }

  /* --op-breakpoint-small */
  @media (width <= 768px) {
    --__op-btn-height: var(--_op-btn-height-small);
    --__op-btn-font-size: var(--_op-btn-font-small);
    --__op-btn-padding: var(--_op-btn-padding-small);

    &.btn--small {
      --__op-btn-height: var(--_op-btn-height-small);
      --__op-btn-font-size: var(--_op-btn-font-small);
      --__op-btn-padding: var(--_op-btn-padding-small);
    }

    &.btn--medium {
      --__op-btn-height: var(--_op-btn-height-medium);
      --__op-btn-font-size: var(--_op-btn-font-medium);
      --__op-btn-padding: var(--_op-btn-padding-medium);
    }

    &.btn--large {
      --__op-btn-height: var(--_op-btn-height-large);
      --__op-btn-font-size: var(--_op-btn-font-large);
      --__op-btn-padding: var(--_op-btn-padding-large);
    }

    &.btn--x-large {
      --__op-btn-height: var(--_op-btn-height-x-large);
      --__op-btn-font-size: var(--_op-btn-font-x-large);
      --__op-btn-padding: var(--_op-btn-padding-x-large);
    }
  }

  /* Tab Bar Button */
  &.btn--tab-bar {
    --__op-btn-height: calc(var(--_op-btn-height-x-large) + 2 * var(--op-space-2x-small));
    --__op-btn-font-size: var(--op-font-2x-small);

    border-radius: var(--op-radius-pill);
    flex-direction: column;
    padding: var(--op-space-small);
    gap: var(--op-space-3x-small);
    min-inline-size: var(--__op-btn-height);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-large);
      --__op-icon-optical-size: var(--_op-icon-optical-size-large);
    }
  }

  &.btn--tab-bar-action {
    --__op-btn-height: calc(var(--_op-btn-height-x-large) + 2 * var(--op-space-2x-small));

    border-radius: var(--op-radius-pill);
    inline-size: var(--__op-btn-height);
    min-inline-size: var(--__op-btn-height);
    padding: 0;

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-large);
      --__op-icon-optical-size: var(--_op-icon-optical-size-large);
    }
  }

  &.btn--destructive,
  &.btn--delete {
    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-alerts-danger-base);

      /* Borderless + Active State */
      &.btn--active {
        background-color: var(--op-color-alerts-danger-plus-five);
        box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
        color: var(--op-color-alerts-danger-on-plus-five);
      }

      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-five);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }

      /* Borderless + Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: var(--op-input-focus-alerts-danger);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
}