.btn {
  --_op-btn-height-small: 3rem;
  --__op-btn-height: 3.6rem;
  --_op-btn-height-medium: 3.6rem;
  --op-input-height-medium: 3.6rem;
  --_op-btn-padding-medium: 0 var(--op-space-x-small);

  border-radius: var(--op-radius-large);
  /*background-color: var(--op-color-neutral-plus-six);*/
  box-shadow: var(--op-border-all) var(--op-color-neutral-plus-six);

  &:hover {
    background-color: var(--op-color-neutral-plus-seven);
    box-shadow: var(--op-border-all) var(--op-color-neutral-plus-five);
  }

  .icon {
    color: var(--op-color-neutral-minus-two);
  }

  &.btn--green {
    background-color: var(--op-color-alerts-notice-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-plus-one);
    color: var(--op-color-on-alerts-notice-base);

    &:hover {
      background-color: var(--op-color-alerts-notice-minus-one);
      color: var(--op-color-on-alerts-notice-base);
    }
  }
}

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

.sign-in-with-google-button {
  padding: 0;

  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.sign-in-with-google-icon {
  padding: 0;
  display: none;

  img {
    min-height: var(--op-space-4x-large);
    min-width: var(--op-space-4x-large);
  }

  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    display: inline-block;
  }
}

.btn--transparent {
  background-color: var(--op-color-transparent-25);
}

.btn--primary {
  .icon {
    color: var(--op-color-white);
  }
}

.btn.btn--mobile-force-small {
  @media (width <= 768px) {
    &.btn--large, &.btn--medium, &.btn--small {
      --__op-btn-height: var(--_op-btn-height-small);
      --__op-btn-font-size: var(--_op-btn-font-medium);
      --__op-btn-padding: var(--_op-btn-padding-medium);
    }
  }
}