zu 0.3.3

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.

/* Styles for Button */

// Styles applied to the root element.
.ZuButton-root {
  min-width: 64px;
  padding: 6px 16px;
  transition: background-color $zu-duration-short $zu-easing-easeInOut 0ms,
  box-shadow $zu-duration-short $zu-easing-easeInOut 0ms,
  border-color $zu-duration-short $zu-easing-easeInOut 0ms,
  color $zu-duration-short $zu-easing-easeInOut 0ms;

  border-radius: $zu-shape-borderRadius;

  // button typography
  font-family: $zu-typography-button-fontFamily;
  font-weight: $zu-typography-button-fontWeight;
  font-size: $zu-typography-button-fontSize;
  line-height: $zu-typography-button-lineHeight;
  letter-spacing: $zu-typography-button-letterSpacing;
  text-transform: $zu-typography-button-textTransform;

  &:hover {
    text-decoration: none;

    background-color: #{change-color($zu-palette-text-primary, $alpha: $zu-palette-action-hoverOpacity)};

    // Reset on touch devices, it doesn't add specificity
    @media (hover: none) {
      background-color: transparent;
    }

    &.ZuButton-text {
      &.ZuButton-colorPrimary {
        background-color: #{change-color($zu-palette-primary-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorSecondary {
        background-color: #{change-color($zu-palette-secondary-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorSuccess {
        background-color: #{change-color($zu-palette-success-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorInfo {
        background-color: #{change-color($zu-palette-info-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorWarning {
        background-color: #{change-color($zu-palette-warning-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorError {
        background-color: #{change-color($zu-palette-error-main, $alpha: $zu-palette-action-hoverOpacity)};
      }
    }

    &.ZuButton-outlined {
      border-width: 1px;
      border-style: solid;

      // Reset on touch devices, it doesn't add specificity
      @media (hover: none) {
        background-color: transparent;
      }

      &.ZuButton-colorPrimary {
        border-color: $zu-palette-primary-main;
        background-color: #{change-color($zu-palette-primary-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorSecondary {
        border-color: $zu-palette-secondary-main;
        background-color: #{change-color($zu-palette-secondary-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorSuccess {
        border-color: $zu-palette-success-main;
        background-color: #{change-color($zu-palette-success-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorInfo {
        border-color: $zu-palette-info-main;
        background-color: #{change-color($zu-palette-info-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorWarning {
        border-color: $zu-palette-warning-main;
        background-color: #{change-color($zu-palette-warning-main, $alpha: $zu-palette-action-hoverOpacity)};
      }

      &.ZuButton-colorError {
        border-color: $zu-palette-error-main;
        background-color: #{change-color($zu-palette-error-main, $alpha: $zu-palette-action-hoverOpacity)};
      }
    }

    &.ZuButton-contained {

      &.ZuButton-colorPrimary {
        // TODO(Shaohua): Support dark theme
        // TODO(Shaohua): inheritContainedHoverBackgroundColor
        background-color: $zu-colors-grey-100;
        box-shadow: $zu-shadow-4;
      }

      // Reset on touch devices, it doesn't add specificity
      @media (hover: none) {
        box-shadow: $zu-shadow-2;
        background-color: $zu-colors-grey-300;
      }

      &.ZuButton-colorPrimary {
        background-color: $zu-palette-primary-dark;

        // Reset on touch devices, it doesn't add specificity
        @media (hover: none) {
          background-color: $zu-palette-primary-main;
        }
      }

      &.ZuButton-colorSecondary {
        background-color: $zu-palette-secondary-dark;

        // Reset on touch devices, it doesn't add specificity
        @media (hover: none) {
          background-color: $zu-palette-secondary-main;
        }
      }

      &.ZuButton-colorSuccess {
        background-color: $zu-palette-success-dark;

        // Reset on touch devices, it doesn't add specificity
        @media (hover: none) {
          background-color: $zu-palette-success-main;
        }
      }

      &.ZuButton-colorInfo {
        background-color: $zu-palette-info-dark;

        // Reset on touch devices, it doesn't add specificity
        @media (hover: none) {
          background-color: $zu-palette-info-main;
        }
      }

      &.ZuButton-colorWarning {
        background-color: $zu-palette-warning-dark;

        // Reset on touch devices, it doesn't add specificity
        @media (hover: none) {
          background-color: $zu-palette-warning-main;
        }
      }

      &.ZuButton-colorError {
        background-color: $zu-palette-error-dark;

        // Reset on touch devices, it doesn't add specificity
        @media (hover: none) {
          background-color: $zu-palette-error-main;
        }
      }
    }
  } // &:hover

  &:active {
    &.ZuButton-contained {
      box-shadow: $zu-shadow-8;
    }
  }

  // Styles applied to the root element if disable_elevation={true}.
  &.ZuButton-disableElevation {
    box-shadow: none;

    &:hover,
    &.ZuButton-focusVisible,
    &:active,
    &.ZuButton-disabled {
      box-shadow: none;
    }
  }

  // State class applied to the ButtonBase root element if the button is keyboard focused.
  &.ZuButton-focusVisible {
    &.ZuButton-contained {
      box-shadow: $zu-shadow-6;
    }
  }

  // State class applied to the root element if disabled={true}.
  &.ZuButton-disabled {
    color: $zu-palette-action-disabled;

    &.ZuButton-outlined {
      border: 1px solid $zu-palette-action-disabledBackground;
    }

    &.ZuButton-contained {
      color: $zu-palette-action-disabled;
      box-shadow: $zu-shadow-0;
      background-color: $zu-palette-action-disabledBackground;
    }
  }

  // Styles applied to the root element if color="inherit".
  &.ZuButton-colorInherit {
    color: inherit;
    border-color: currentColor;
  }

  // Styles applied to the root element if size="small".
  &.ZuButton-sizeSmall {
    &.ZuButton-text {
      padding: 4px 5px;
      font-size: 13px;
    }

    &.ZuButton-outlined {
      padding: 3px 9px;
      font-size: 13px;
    }

    &.ZuButton-contained {
      padding: 4px 10px;
      font-size: 13px;
    }
  }

  // Styles applied to the root element if size="medium".
  &.ZuButton-sizeMedium {
  }

  // Styles applied to the root element if size="large".
  &.ZuButton-sizeLarge {
    &.ZuButton-text {
      padding: 8px 11px;
      font-size: 15px;
    }

    &.ZuButton-outlined {
      padding: 7px 21px;
      font-size: 15px;
    }

    &.ZuButton-contained {
      padding: 8px 22px;
      font-size: 15px;
    }
  }

  // Styles applied to the root element if fullWidth={true}.
  &.ZuButton-fullWidth {
    width: 100%;
  }
}

// Styles applied to the root element if variant="text".
.ZuButton-text {
  padding: 6px 8px;

  &.ZuButton-colorInherit {
  }

  &.ZuButton-colorPrimary {
    color: $zu-palette-primary-main;
  }

  &.ZuButton-colorSecondary {
    color: $zu-palette-secondary-main;
  }

  &.ZuButton-colorSuccess {
    color: $zu-palette-success-main;
  }

  &.ZuButton-colorInfo {
    color: $zu-palette-info-main;
  }

  &.ZuButton-colorWarning {
    color: $zu-palette-warning-main;
  }

  &.ZuButton-colorError {
    color: $zu-palette-error-main;
  }

  &.ZuButton-sizeSmall {
  }

  &.ZuButton-sizeMedium {
  }

  &.ZuButton-sizeLarge {
  }
}

// Styles applied to the root element if variant="outlined".
.ZuButton-outlined {
  padding: 5px 15px;
  border: 1px solid currentColor;

  &.ZuButton-colorInherit {
  }

  &.ZuButton-colorPrimary {
    color: $zu-palette-primary-main;
    border: 1px solid #{change-color($zu-palette-primary-main, $alpha: 0.5)};
  }

  &.ZuButton-colorSecondary {
    color: $zu-palette-secondary-main;
    border: 1px solid #{change-color($zu-palette-secondary-main, $alpha: 0.5)};
  }

  &.ZuButton-colorSuccess {
    color: $zu-palette-success-main;
    border: 1px solid #{change-color($zu-palette-success-main, $alpha: 0.5)};
  }

  &.ZuButton-colorInfo {
    color: $zu-palette-info-main;
    border: 1px solid #{change-color($zu-palette-info-main, $alpha: 0.5)};
  }

  &.ZuButton-colorWarning {
    color: $zu-palette-warning-main;
    border: 1px solid #{change-color($zu-palette-warning-main, $alpha: 0.5)};
  }

  &.ZuButton-colorError {
    color: $zu-palette-error-main;
    border: 1px solid #{change-color($zu-palette-error-main, $alpha: 0.5)};
  }

  &.ZuButton-sizeSmall {
  }

  &.ZuButton-sizeMedium {
  }

  &.ZuButton-sizeLarge {
  }
}

// Styles applied to the root element if variant="contained".
.ZuButton-contained {
  // TODO(Shaohua): Convert to contrastText
  color: getContrastText($zu-colors-grey-300);
  background-color: $zu-colors-grey-300;
  box-shadow: $zu-shadow-2;

  &.ZuButton-colorInherit {
  }

  &.ZuButton-colorPrimary {
    color: $zu-palette-primary-contrastText;
    background-color: $zu-palette-primary-main;
  }

  &.ZuButton-colorSecondary {
    color: $zu-palette-secondary-contrastText;
    background-color: $zu-palette-secondary-main;
  }

  &.ZuButton-colorSuccess {
    color: $zu-palette-success-contrastText;
    background-color: $zu-palette-success-main;
  }

  &.ZuButton-colorInfo {
    color: $zu-palette-info-contrastText;
    background-color: $zu-palette-info-main;
  }

  &.ZuButton-colorWarning {
    color: $zu-palette-warning-contrastText;
    background-color: $zu-palette-warning-main;
  }

  &.ZuButton-colorError {
    color: $zu-palette-error-contrastText;
    background-color: $zu-palette-error-main;
  }

  &.ZuButton-sizeSmall {
  }

  &.ZuButton-sizeMedium {
  }

  &.ZuButton-sizeLarge {
  }
}


// For icons

// Styles applied to the startIcon element if supplied.
.ZuButton-startIcon {
  display: inherit;
  margin-right: 8px;
  margin-left: -4px;

  &.ZuButton-iconSizeSmall {
    margin-left: -2px;
  }
}

// Styles applied to the endIcon element if supplied.
.ZuButton-endIcon {
  display: inherit;
  margin-right: -4px;
  margin-left: 8px;

  &.ZuButton-iconSizeSmall {
    margin-right: -2px;
  }
}

// Styles applied to the icon element if supplied and size="small".
.ZuButton-iconSizeSmall {
  & > *:nth-of-type(1) {
    font-size: 18px;
  }
}

// Styles applied to the icon element if supplied and size="medium".
.ZuButton-iconSizeMedium {
  & > *:nth-of-type(1) {
    font-size: 20px;
  }
}

// Styles applied to the icon element if supplied and size="large".
.ZuButton-iconSizeLarge {
  & > *:nth-of-type(1) {
    font-size: 22px;
  }
}