@import './clinical-lowlight-theme/PageHeaderButton.module';
@import './orion-fusion-theme/PageHeaderButton.module';

:local {
  .page-header-button {
    align-items: center;
    background-color: transparent;
    border: 0;
    color: var(--terra-dev-site-page-header-button-color, #3a67a4);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    text-align: start;

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--terra-dev-site-page-header-button-hover-background-color);
        border-radius: var(--terra-dev-site-page-header-button-hover-border-radius, 3px);
        color: var(--terra-dev-site-page-header-button-hover-color, #004c75);
      }
    }

    &:disabled {
      color: var(--terra-dev-site-page-header-button-disabled-color, #222a2e);
      cursor: default;
      opacity: var(--terra-dev-site-page-header-button-disabled-opacity, 0.3);
      pointer-events: none;
    }

    &[data-focus-styles-enabled='true']:focus {
      color: var(--terra-dev-site-page-header-button-focus-color, #3a67a4);

      .button-inner {
        box-shadow: var(--terra-dev-site-page-header-button-focus-button-inner-box-shadow, none);
        outline: var(--terra-dev-site-page-header-button-focus-button-inner-outline, 2px dashed #000);
        outline-offset: var(--terra-dev-site-page-header-button-focus-button-inner-outline-offset, -2px);
      }
    }

    &:active {
      background-color: var(--terra-dev-site-page-header-button-active-background-color, #e8e9ea);
      border-radius: var(--terra-dev-site-page-header-button-active-border-radius, 3px);
      color: var(--terra-dev-site-page-header-button-active-color, #004c75);
    }

    .button-inner {
      line-height: 0;
      padding: var(--terra-dev-site-page-header-button-button-inner-padding, 0.5714rem);
      position: relative;
    }

    .button-image {
      height: var(--terra-dev-site-page-header-button-button-image-height, 1rem);
      overflow: hidden;
      position: relative;
      width: var(--terra-dev-site-page-header-button-button-image-width, 1rem);
    }

    .button-image > svg { // stylelint-disable-line selector-max-compound-selectors
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }
}