@import '~terra-mixins/lib/Mixins';

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

:local {
  // appearance: button; set to correct the inability to style
  // clickable types in iOS and Safari.
  // Appearance needs to be applied only to button/input elements, as
  // applying to anchor element will cause render issue.
  // More info:
  // https://github.com/necolas/normalize.css/issues/566
  // https://github.com/necolas/normalize.css/commit/1be44f3b2a79af5d463c7ea0264fee0e6fa464ca
  // stylelint-disable selector-no-qualifying-type
  button.button {
    appearance: button;  // autoprefix fix into -webkit-appearance
  }
  // stylelint-enable selector-no-qualifying-type

  .button {
    background-color: transparent; // Remove the gray background on active links in IE 10
    border: 0;
    color: var(--terra-show-hide-v1-button-color, #0059a8);
    cursor: pointer;
    display: inline-block; // prevents variant icon from breaking onto its own line
    font-family: inherit;
    font-size: var(--terra-show-hide-v1-button-font-size, 1rem);
    line-height: var(--terra-show-hide-v1-button-line-height, 1.429);
    outline: none;
    padding-bottom: var(--terra-show-hide-v1-button-padding-bottom, 0.21428rem);
    padding-left: var(--terra-show-hide-v1-button-padding-left, 0);
    padding-right: var(--terra-show-hide-v1-button-padding-right, 0);
    padding-top: var(--terra-show-hide-v1-button-padding-top, 0.21428rem);
    text-align: center;
    text-decoration: var(--terra-show-hide-v1-button-text-decoration, none);
    text-transform: none;
    touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
    user-select: none; // Prevent text selection on buttons on mobile devices
    white-space: normal;
    // Remove the inner border and padding in Firefox.
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
    }

    .icon {
      background-image: var(--terra-show-hide-v1-button-icon-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><polygon fill="#0059a8" points="40.8,8.6 24,25 7.2,8.6 0,15.9 24,39.4 48,15.9 "/></svg>'));
      background-repeat: no-repeat;
      background-size: cover;
      display: inline-block;
      height: var(--terra-show-hide-v1-button-icon-height, 0.7143em);
      margin-left: var(--terra-show-hide-v1-button-icon-margin-left, 0.28571em);
      width: var(--terra-show-hide-v1-button-icon-width, 0.7143em);
    }

    &.is-focused {
      background-color: var(--terra-show-hide-v1-button-focus-background-color, transparent);
      border-radius: var(--terra-show-hide-v1-button-focus-border-radius, 0.2142rem);
      box-shadow: var(--terra-show-hide-v1-button-focus-box-shadow, 0 0 0 1px #4cb2e9, 0 0 0 3px rgba(76, 178, 233, 0.25));
      color: var(--terra-show-hide-v1-button-focus-color, #001f67);
      text-decoration: var(--terra-show-hide-v1-button-focus-text-decoration, underline);

      .icon {
        background-image: var(--terra-show-hide-v1-button-focus-icon-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><polygon fill="#001f67" points="40.8,8.6 24,25 7.2,8.6 0,15.9 24,39.4 48,15.9 "/></svg>'));
      }
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
      &:hover,
      &.is-hovered {
        background-color: var(--terra-show-hide-v1-button-hover-background-color);
        color: var(--terra-show-hide-v1-button-hover-color, #001f67);
        text-decoration: var(--terra-show-hide-v1-button-hover-text-decoration, underline);

        /* stylelint-disable-next-line max-nesting-depth */
        .icon {
          background-image: var(--terra-show-hide-v1-button-hover-icon-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><polygon fill="#001f67" points="40.8,8.6 24,25 7.2,8.6 0,15.9 24,39.4 48,15.9 "/></svg>'));
        }
      }
    }

    &:active {
      color: var(--terra-show-hide-v1-button-active-color, #001f67);
    }
  }

  .button[aria-expanded='true'] {
    .icon {
      transform: rotate(180deg);
    }
  }

  .inner {
    display: flex;
  }

  .text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .icon-holder {
    align-self: center;
    flex: 0 0 auto;
  }
}