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

:local {
  .workspace-button {
    align-items: center;
    color: var(--terra-application-workspace-workspace-button-color, #7a7f82);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: center;
    margin: 0;
    outline: none;
    position: relative;
  
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--terra-application-workspace-workspace-button-hover-color, #64696c);
      }
    }
  
    &[data-focus-styles-enabled='true']:focus {
      color: var(--terra-application-workspace-workspace-button-focus-color, #7a7f82);

      .button-inner {
        box-shadow: var(--terra-application-workspace-workspace-button-focus-button-inner-box-shadow, none);
        outline: var(--terra-application-workspace-workspace-button-focus-button-inner-outline, 2px dashed #000);
        outline-offset: var(--terra-application-workspace-workspace-button-focus-button-inner-outline-offset, -4px);
      }
    }
  
    &:active {
      background-color: var(--terra-application-workspace-workspace-button-active-background-color, transparent);
      border-radius: var(--terra-application-workspace-workspace-button-active-border-radius, 0);
      color: var(--terra-application-workspace-workspace-button-active-color, #4e5558);
    }

    .button-inner {
      line-height: 0;
      padding: var(--terra-application-workspace-workspace-button-button-inner-padding, 0.6429rem);
      position: relative;
    }
  
    .button-image {
      height: var(--terra-application-workspace-workspace-button-button-image-height, 0.8571rem);
      overflow: hidden;
      position: relative;
      width: var(--terra-application-workspace-workspace-button-button-image-width, 0.8571rem);
    }
  
    .button-image > svg { // stylelint-disable-line selector-max-compound-selectors
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }
}