/* ==========================================================================
 * Button
 * ========================================================================== */

.mds-c-button {
  --mds-v-button__box-shadow: 0 0 0 var(--mds-v-button__border-size)
    var(--mds-v-button__border-color, transparent) inset;
  --mds-v-button__border-color: var(--mds-t-border-color--primary);
  --mds-v-button__border-color--hover: var(--mds-t-border-color--primary);
  --mds-v-button__border-color--active: var(--mds-t-border-color--primary);
  --mds-v-button__line-height: var(--mds-d-line-height--med);
  --mds-v-button__loading-color: var(--mds-d-color-slate--700);
  --mds-v-button__padding--horizontal: $mds-v-button__horizontal-padding--med;
  --mds-v-button__padding--vertical: $mds-v-button__vertical-padding--med;

  background-color: var(--mds-v-button__background-color, transparent);
  border: 0;
  border-radius: var(--mds-d-border-radius--default);
  box-shadow: var(--mds-v-button__box-shadow);
  color: var(--mds-v-button__color, var(--mds-t-text-color--secondary));
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--mds-d-font-family--primary);
  max-width: 100%;
  padding: var(--mds-v-button__padding--vertical)
    var(--mds-v-button__padding--horizontal);
  position: relative;
  text-decoration: none;
  user-select: none;

  &__text {
    @mixin mds-m-text-overflow-ellipsis;

    .mds-c-button--size-xs & {
      @mixin mds-m-heading--size-sm;
    }

    .mds-c-button--min-width & {
      flex-grow: 1;
      text-align: left;
    }
  }

  &--min-width {
    min-width: 9rem;
  }

  &--max-width {
    max-width: 16rem;
  }

  &--static-width-xs {
    max-width: 3rem;
    min-width: 3rem;
  }

  &--static-width-sm {
    max-width: 4rem;
    min-width: 4rem;
  }

  &--static-width-med {
    max-width: 8rem;
    min-width: 8rem;
  }

  &--static-width-lg {
    max-width: 12rem;
    min-width: 12rem;
  }

  &--static-width-xl {
    max-width: 16rem;
    min-width: 16rem;
  }

  /* Default Theme */
  &--theme-default {
    --mds-v-button__background-color: var(--mds-d-color-slate--600);
    --mds-v-button__background-color--hover: var(--mds-d-color-slate--700);
    --mds-v-button__background-color--active: var(--mds-d-color-slate--800);
    --mds-v-button__color: #fff;
    --mds-v-button__color--hover: #fff;
    --mds-v-button__color--active: #fff;

    &.mds-c-button--split-left {
      border-right: 1px solid var(--mds-d-color-slate--700);
    }
  }

  /* Primary Theme */
  &--theme-primary {
    --mds-v-button__background-color: var(--mds-d-color-green--500);
    --mds-v-button__background-color--hover: var(--mds-d-color-green--600);
    --mds-v-button__background-color--active: var(--mds-d-color-green--700);
    --mds-v-button__color: #fff;
    --mds-v-button__color--hover: #fff;
    --mds-v-button__color--active: #fff;

    &.mds-c-button--split-left {
      border-right: 1px solid var(--mds-d-color-green--700);
    }
  }

  /* Primary (Alt) Theme */
  &--theme-primary-alt {
    --mds-v-button__background-color: var(--mds-d-color-blue--500);
    --mds-v-button__background-color--hover: var(--mds-d-color-blue--600);
    --mds-v-button__background-color--active: var(--mds-d-color-blue--700);
    --mds-v-button__color: #fff;
    --mds-v-button__color--hover: #fff;
    --mds-v-button__color--active: #fff;

    &.mds-c-button--split-left {
      border-right: 1px solid var(--mds-d-color-blue--700);
    }
  }

  /* Warning Theme */
  &--theme-warning {
    --mds-v-button__background-color: var(--mds-d-color-orange--500);
    --mds-v-button__background-color--hover: var(--mds-d-color-orange--600);
    --mds-v-button__background-color--active: var(--mds-d-color-orange--700);
    --mds-v-button__color: #fff;
    --mds-v-button__color--hover: #fff;
    --mds-v-button__color--active: #fff;

    &.mds-c-button--split-left {
      border-right: 1px solid var(--mds-d-color-orange--700);
    }
  }

  /* Danger Theme */
  &--theme-danger {
    --mds-v-button__background-color: var(--mds-d-color-red--500);
    --mds-v-button__background-color--hover: var(--mds-d-color-red--600);
    --mds-v-button__background-color--active: var(--mds-d-color-red--700);
    --mds-v-button__color: #fff;
    --mds-v-button__color--hover: #fff;
    --mds-v-button__color--active: #fff;

    &.mds-c-button--split-left {
      border-right: 1px solid var(--mds-d-color-red--700);
    }
  }

  /* Flat Theme */
  &--theme-flat {
    --mds-v-button__background-color--hover: var(
      --mds-t-background-color--secondary
    );
    --mds-v-button__background-color--active: var(
      --mds-t-background-color--tertiary
    );
    --mds-v-button__border-size: 0;

    &:hover,
    &:active,
    .mds-is-clickable:hover & {
      --mds-v-button__border-size: 1px;
    }
  }

  /* Link Theme */
  &--theme-link {
    --mds-v-button__border-size: 0;

    text-decoration: underline !important;

    &.mds-is-loading {
      --mds-v-button__background-color: transparent !important;
      --mds-v-button__color: var(--mds-v-button__loading-color) !important;
    }
  }

  /* Underline Theme */
  &--theme-underline {
    --mds-v-button__border-size: 0;

    &:hover,
    &:active,
    .mds-is-clickable:hover & {
      text-decoration: underline !important;
    }
  }

  /* Border Theme */
  &--theme-border {
    --mds-v-button__background-color--hover: var(
      --mds-t-background-color--secondary
    );
    --mds-v-button__background-color--active: var(
      --mds-t-background-color--tertiary
    );

    border: 1px solid var(--mds-t-border-color--primary);
    padding: calc(var(--mds-v-button__padding--vertical) - 2px)
      calc(var(--mds-v-button__padding--horizontal) - 2px);

    &.mds-c-button--split-right {
      border-left: none;
    }
  }

  /* specific to med border buttons so the height aligns with other form elements */
  &--theme-border--med {
    padding: calc(var(--mds-v-button__padding--vertical) - 1px)
      var(--mds-v-button__padding--horizontal);
  }

  &:focus-visible {
    outline: 2px solid
      var(--mds-t-outline-color, var(--mds-t-text-color--accent));
    outline-offset: 3px;
    z-index: 2;
  }

  &:hover,
  &:active {
    text-decoration: none;
    z-index: 1;
  }

  &:hover {
    --mds-v-button__border-color: var(--mds-v-button__border-color--hover);

    background-color: var(--mds-v-button__background-color--hover, transparent);
    color: var(--mds-v-button__color--hover, var(--mds-t-text-color--primary));
  }

  &:active {
    --mds-v-button__border-color: var(--mds-v-button__border-color--active);

    background-color: var(
      --mds-v-button__background-color--active,
      transparent
    );
    color: var(--mds-v-button__color--active, var(--mds-t-text-color--primary));
  }

  &.mds-is-active {
    --mds-v-button__background-color: var(
      --mds-t-background-color--inverse-primary
    ) !important;
    --mds-v-button__background-color--hover: var(
      --mds-t-background-color--inverse-primary
    ) !important;
    --mds-v-button__background-color--active: var(
      --mds-t-background-color--inverse-primary
    ) !important;
    --mds-v-button__border-size: 0 !important;
    --mds-v-button__color: var(--mds-t-text-color--inverse-primary) !important;
    --mds-v-button__color--hover: var(
      --mds-t-text-color--inverse-primary
    ) !important;
    --mds-v-button__color--active: var(
      --mds-t-text-color--inverse-primary
    ) !important;

    text-decoration: none !important;

    &.mds-c-button--theme-border {
      border: 1px solid transparent;
    }
  }

  &.mds-is-loading {
    --mds-v-button__background-color: var(--mds-v-button__loading-color);
    --mds-v-button__color: #fff;

    cursor: default;
    opacity: 1 !important; /* Overrides disabled styles */
    pointer-events: none;
    text-decoration: none !important;
  }

  &.mds-has-error {
    --mds-v-button__background-color: transparent;
    --mds-v-button__background-color--hover: transparent;
    --mds-v-button__background-color--active: transparent;
    --mds-v-button__border-color: var(--mds-t-color--red);
    --mds-v-button__border-color--hover: var(--mds-t-color--red);
    --mds-v-button__border-color--active: var(--mds-t-color--red);
    --mds-v-button__color: var(--mds-t-color--red);
    --mds-v-button__color--hover: var(--mds-t-color--red);
    --mds-v-button__color--active: var(--mds-t-color--red);

    &.mds-c-button--theme-border:not(.mds-is-active) {
      border: 1px solid;
    }
  }

  &.mds-has-changes {
    --mds-v-button__background-color: var(
      --mds-t-background-color--changes-muted
    );
    --mds-v-button__background-color--hover: var(
      --mds-t-background-color--changes-muted
    );
    --mds-v-button__background-color--active: var(
      --mds-t-background-color--changes-muted
    );
    --mds-v-button__border-color: var(--mds-t-color--orange);
    --mds-v-button__border-color--hover: var(--mds-t-color--orange);
    --mds-v-button__border-color--active: var(--mds-t-color--orange);
    --mds-v-button__color: var(--mds-t-text-color--primary);
    --mds-v-button__color--hover: var(--mds-t-text-color--primary);
    --mds-v-button__color--active: var(--mds-t-text-color--primary);

    border: 1px solid var(--mds-t-color--orange);
  }

  &.mds-has-warning {
    --mds-v-button__background-color: transparent;
    --mds-v-button__background-color--hover: transparent;
    --mds-v-button__background-color--active: transparent;
    --mds-v-button__border-color: var(--mds-t-color--orange);
    --mds-v-button__border-color--hover: var(--mds-t-color--orange);
    --mds-v-button__border-color--active: var(--mds-t-color--orange);
    --mds-v-button__color: var(--mds-t-color--orange);
    --mds-v-button__color--hover: var(--mds-t-color--orange);
    --mds-v-button__color--active: var(--mds-t-color--orange);

    &.mds-c-button--theme-border:not(.mds-is-active) {
      border: 1px solid;
    }
  }

  &.mds-scroll-to-top {
    bottom: 104px;
    padding: calc(var(--mds-v-button__padding--vertical) + 3px)
      calc(var(--mds-v-button__padding--horizontal) + 4px) !important;
    position: fixed;
    right: 0;
    z-index: $z-index--slideout;
  }

  &--readonly {
    pointer-events: none;
  }

  &&--split-right {
    border-radius: 0 var(--mds-d-border-radius--default)
      var(--mds-d-border-radius--default) 0;
  }

  &&--split-left {
    border-radius: var(--mds-d-border-radius--default) 0 0
      var(--mds-d-border-radius--default);
  }
}

.mds-c-button__content {
  @mixin mds-m-label--size-med;

  align-items: center;
  color: inherit;
  display: flex;
  height: var(--mds-v-button__line-height);
  justify-content: center;
  pointer-events: none; /* To prevent active styles on disbled buttons */

  > * {
    margin-left: var(--mds-d-spacing--xs);
    margin-right: var(--mds-d-spacing--xs);
  }

  > .mds-c-icon {
    height: var(--mds-d-font-size--sm);
    transform: scale(1.1666); /* 14px - Temporary until we update or icons */
    width: var(--mds-d-font-size--sm);

    .mds-c-button--size-xs & {
      height: var(--mds-d-font-size--xs);
      width: var(--mds-d-font-size--xs);
    }
  }

  &--layout-left-packed {
    justify-content: flex-start;

    .mds-c-button__text {
      margin-right: auto;
    }
  }
}

.mds-c-button__TimesheetLabel {
  position: static;

  .hours {
    display: inline-block;
    text-align: right;
    width: 45%;
  }

  .separator {
    display: inline-block;
  }

  .minutes {
    display: inline-block;
    text-align: left;
    width: 55%;
  }
}

.mds-c-button__Tcontent {
  @mixin mds-m-label--size-med;

  align-items: center;
  color: inherit;
  display: flex;
  font-weight: normal !important;
  height: var(--mds-v-button__line-height);
  justify-content: center;
  pointer-events: none; /* To prevent active styles on disbled buttons */

  > * {
    margin-left: var(--mds-d-spacing--xs);
    margin-right: var(--mds-d-spacing--xs);
  }

  &--layout-left-packed {
    justify-content: flex-start;

    .mds-c-button__text {
      margin-right: auto;
    }
  }
}

.mds-c-button--size-xs {
  .mds-c-button__content {
    > .mds-c-dot--animated {
      margin-left: 0.125rem;
      margin-right: 0.125rem;
    }
  }
}

/*
  Add WCAG Reflow Compliance
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-button {
    max-width: 100%;
    min-width: fit-content;

    --mds-v-button__padding--horizontal: $mds-v-button__horizontal-padding--sm;
    --mds-v-button__padding--vertical: $mds-v-button__vertical-padding--sm;

    &-menu {
      /* Override inline style */
      margin-bottom: var(--mds-d-spacing--sm) !important;
      padding: var(--mds-d-spacing--xs) 0 !important;
    }

    &__content {
      height: auto;
    }

    &__text {
      white-space: normal;
    }

    &[data-tracking$='-emoji-reaction'] {
      margin-top: var(--mds-d-spacing--sm);
    }
  }
}