/* Global button styles */

.mdc-button {
  font-size: var(--font-size-button);
  border-radius: var(--border-radius-button) !important;
  font-weight: var(--font-weight-500) !important;
  transition: var(--transition-default);
  height: 32px !important;
  padding: 0 12px !important;
  min-width: 24px !important;
  &.button-large{
    height: 40px !important;
    padding: 0 16px !important;
  }
  &.button-small{
    height: 24px !important;
    padding: 0 8px !important;
  }
}

.mat-mdc-button .mat-mdc-button-touch-target, .mat-mdc-unelevated-button .mat-mdc-button-touch-target, .mat-mdc-raised-button .mat-mdc-button-touch-target, .mat-mdc-outlined-button .mat-mdc-button-touch-target {
  height: 32px !important;
}

/* Primary button */
body {
  .mdc-button {
    &.mdc-button--unelevated {
      background-color: var(--color-surface-brand-idle);
      color: var(--color-on-surface-alt-primary);
      transition: var(--transition-default);

      &:hover {
        background-color: var(--color-surface-brand-hover);
      }

      &:active {
        background-color: var(--color-surface-brand-press);
      }
      &[disabled="true"]{
        background-color: var(--color-surface-brand-disabled);
      }
      &.neutral{
        background-color: var(--color-surface-alt-idle);

        &:hover {
          background-color: var(--color-surface-alt-hover);
        }

        &:active {
          background-color: var(--color-surface-alt-press);
        }
        &[disabled="true"]{
          background-color: var(--color-surface-alt-disabled);
        }
      }
      &.success{
        background-color: var(--color-surface-success-idle);

        &:hover {
          background-color: var(--color-surface-success-hover);
        }

        &:active {
          background-color: var(--color-surface-success-press);
        }
        &[disabled="true"]{
          background-color: var(--color-surface-success-disabled);
        }
      }
      &.info{
        background-color: var(--color-surface-info-idle);

        &:hover {
          background-color: var(--color-surface-info-hover);
        }

        &:active {
          background-color: var(--color-surface-info-press);
        }
        &[disabled="true"]{
          background-color: var(--color-surface-info-disabled);
        }
      }
      &.warning{
        background-color: var(--color-surface-warning-idle);

        &:hover {
          background-color: var(--color-surface-warning-hover);
        }

        &:active {
          background-color: var(--color-surface-warning-press);
        }
        &[disabled="true"]{
          background-color: var(--color-surface-warning-disabled);
        }
      }
      &.danger{
        background-color: var(--color-surface-danger-idle);

        &:hover {
          background-color: var(--color-surface-danger-hover);
        }

        &:active {
          background-color: var(--color-surface-danger-press);
        }
        &[disabled="true"]{
          background-color: var(--color-surface-danger-disabled);
        }
      }
      &.alternative{
        background-color: var(--color-surface-neutral-idle);
        color: var(--color-on-surface-neutral-primary);

        &:hover {
          background-color: var(--color-surface-neutral-hover);
        }

        &:active {
          background-color: var(--color-surface-neutral-press);
        }
        &[disabled="true"]{
          background-color: var(--color-surface-neutral-disabled);
          color: var(--color-on-surface-neutral-disabled);
        }
      }
    }
  }
}

/* Secondary button */
body {
  .mdc-button {
    &.mdc-button--outlined {
      border: 1px solid var(--color-surface-brand-idle);
      color: var(--color-on-surface-brand-primary);
      transition: var(--transition-default);
      &:hover {
        background-color: var(--color-surface-brand-hover);
        color: var(--color-on-surface-alt-primary);
      }
      &:active {
        background-color: var(--color-surface-brand-press);
        color: var(--color-on-surface-alt-primary);
      }
      &[disabled="true"]{
        border: 1px solid var(--color-surface-brand-disabled);
        color: var(--color-on-surface-brand-disabled);
      }
      &.neutral{
        border: 1px solid var(--color-surface-alt-idle);
        color: var(--color-on-surface-neutral-primary);
        &:hover {
          background-color: var(--color-surface-alt-hover);
          color: var(--color-on-surface-alt-primary);
        }
        &:active {
          background-color: var(--color-surface-alt-press);
        }
        &[disabled="true"]{
          border: 1px solid var(--color-surface-alt-disabled);
          color: var(--color-on-surface-neutral-disabled);
        }
      }
      &.success{
        border: 1px solid var(--color-surface-success-idle);
        color: var(--color-on-surface-success-primary);
        &:hover {
          background-color: var(--color-surface-success-hover);
          color: var(--color-on-surface-alt-primary);
        }
        &:active {
          background-color: var(--color-surface-success-press);
        }
        &[disabled="true"]{
          border: 1px solid var(--color-surface-success-disabled);
          color: var(--color-on-surface-success-disabled);
        }
      }
      &.info{
        border: 1px solid var(--color-surface-info-idle);
        color: var(--color-on-surface-info-primary);
        &:hover {
          background-color: var(--color-surface-info-hover);
          color: var(--color-on-surface-alt-primary);
        }
        &:active {
          background-color: var(--color-surface-info-press);
        }
        &[disabled="true"]{
          border: 1px solid var(--color-surface-info-disabled);
          color: var(--color-on-surface-info-disabled);
        }
      }
      &.warning{
        border: 1px solid var(--color-surface-warning-idle);
        color: var(--color-on-surface-warning-primary);
        &:hover {
          background-color: var(--color-surface-warning-hover);
          color: var(--color-on-surface-alt-primary);
        }
        &:active {
          background-color: var(--color-surface-warning-press);
        }
        &[disabled="true"]{
          border: 1px solid var(--color-surface-warning-disabled);
          color: var(--color-on-surface-warning-disabled);
        }
      }
      &.danger{
        border: 1px solid var(--color-surface-danger-idle);
        color: var(--color-on-surface-danger-primary);
        &:hover {
          background-color: var(--color-surface-danger-hover);
          color: var(--color-on-surface-alt-primary);
        }
        &:active {
          background-color: var(--color-surface-danger-press);
        }
        &[disabled="true"]{
          border: 1px solid var(--color-surface-danger-disabled);
          color: var(--color-on-surface-danger-disabled);
        }
      }
      &.alternative{
        border: 1px solid var(--color-surface-neutral-idle);
        color: var(--color-on-surface-alt-primary);
        &:hover {
          background-color: var(--color-surface-neutral-hover);
          color: var(--color-on-surface-neutral-primary);
        }
        &:active {
          background-color: var(--color-surface-neutral-press);
        }
        &[disabled="true"]{
          border: 1px solid var(--color-on-surface-alt-disabled);
          color: var(--color-on-surface-alt-disabled);
        }
      }
    }
  }
}

/* Tertiary button */
body {
  .mdc-button {
    &.mat-mdc-button {
      color: var(--color-on-surface-brand-primary);
      transition: var(--transition-default);
      &:hover {
        background-color: var(--color-surface-brand-hover);
        color: var(--color-on-surface-alt-primary);
      }
      &:active {
        background-color: var(--color-surface-brand-press);
        color: var(--color-on-surface-alt-primary);
      }
      &[disabled="true"]{
        color: var(--color-on-surface-brand-disabled);
      }
      &.neutral{
        color: var(--color-on-surface-neutral-primary);

        &:hover {
          background-color: var(--color-surface-alt-hover);
          color: var(--color-on-surface-alt-primary)
        }
        &:active {
          background-color: var(--color-surface-alt-press);
        }
        &[disabled="true"]{
          color: var(--color-on-surface-neutral-disabled);
        }
      }
      &.success{
        color: var(--color-on-surface-success-primary);

        &:hover {
          background-color: var(--color-surface-success-hover);
          color: var(--color-on-surface-alt-primary)
        }
        &:active {
          background-color: var(--color-surface-success-press);
        }
        &[disabled="true"]{
          color: var(--color-on-surface-success-disabled);
        }
      }
      &.info{
        color: var(--color-on-surface-info-primary);

        &:hover {
          background-color: var(--color-surface-info-hover);
          color: var(--color-on-surface-alt-primary)
        }
        &:active {
          background-color: var(--color-surface-info-press);
        }
        &[disabled="true"]{
          color: var(--color-on-surface-info-disabled);
        }
      }
      &.warning{
        color: var(--color-on-surface-warning-primary);

        &:hover {
          background-color: var(--color-surface-warning-hover);
          color: var(--color-on-surface-alt-primary)
        }
        &:active {
          background-color: var(--color-surface-warning-press);
        }
        &[disabled="true"]{
          color: var(--color-on-surface-warning-disabled);
        }
      }
      &.danger{
        color: var(--color-on-surface-danger-primary);

        &:hover {
          background-color: var(--color-surface-danger-hover);
          color: var(--color-on-surface-alt-primary)
        }
        &:active {
          background-color: var(--color-surface-danger-press);
        }
        &[disabled="true"]{
          color: var(--color-on-surface-danger-disabled);
        }
      }
      &.alternative{
        color: var(--color-on-surface-alt-primary);

        &:hover {
          background-color: var(--color-surface-neutral-hover);
          color: var(--color-on-surface-neutral-primary)
        }
        &:active {
          background-color: var(--color-surface-neutral-press);
        }
        &[disabled="true"]{
          color: var(--color-on-surface-alt-disabled);
        }
      }
    }
  }
}

/* Button with icons */

.mdc-button{
  .mdc-button__label{
    display: flex;
    align-items: center;
    font-size: var(--font-size-button);
    line-height: 20px;
    i, .material-symbols-rounded{
      font-size: var(--font-size-l);
    }
  }
  &.icon-left{
    i, .material-symbols-rounded{
      margin-right: 4px;
      margin-left: -4px;
    }
  }
  &.icon-right{
    i, .material-symbols-rounded{
      margin-left: 4px;
      margin-right: -4px;
    }
  }
  &.icon-left.icon-right{
    i:first-of-type,
    .material-symbols-rounded:first-of-type{
      margin-right: 4px !important;
      margin-left: -4px !important;
    }
  }
  &.icon-only{
    padding: 0 8px !important;
    i, .material-symbols-rounded{
      margin: 0 !important;
    }
    &.button-large{
      padding: 0 12px !important;
    }
    &.button-small{
      padding: 0 4px !important;
    }
  }
}

.mat-mdc-icon-button .mat-mdc-button-touch-target,
.mat-mdc-icon-button .mat-mdc-focus-indicator{
  display: none !important;
}

/* Loading state */

.mdc-button.loading{
  pointer-events: none;
  .mdc-button__label{
    span:first-of-type{
      opacity: 0;
    }
  }
  .mat-mdc-progress-spinner{
    display: block;
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    margin-top: -8px;
    margin-left: -8px;
    width: 16px !important;
    height: 16px !important;
  }
  &.mat-mdc-button{
    background-color: var(--color-surface-neutral-press) !important;
  }
  &.mdc-button--unelevated{
    .mat-mdc-progress-spinner circle,{
      stroke: var(--color-on-surface-alt-primary) !important;
    }
  }
}