src/constants/styles.scss
// Dimensions
$top-bar-height: 36px;
$button-width: 46px;
$button-height: 46px;
$icon-width: 24px;
$icon-height: 24px;
$panel-width: 293px;
$right-panel-width: 293px;
$left-panel-width: 219px;
$left-panel-width: var(--left-panel-width);
$left-panel-header-margin-inline-start: 16px;
$left-header-width: 41px;
$right-header-width: 41px;
$logo-bar-height: 24px;

// Modular headers
$modular-header-min-height: 32px;

// Z-Index
$popup-z-index: 70;
$modal-z-index: 100;

// Export so they can be used in JS file and we have a single source of truth
:export {
  LEFT_HEADER_WIDTH: $left-header-width;
  RIGHT_HEADER_WIDTH: $right-header-width;
}

// Font
$font-family: sans-serif;

// Mobile dimensions
$top-bar-height-m: 42px;
$button-width-m: 41px;
$button-height-m: 41px;
$search-overlay-height-m: 61px;

/* stylelint-disable color-no-hex */
// TODO: Remove
// Old Colors
$white: #fff;
$pdftron-blue: #00a5e4; // TODO: confirm that this is what we want

// TODO: Remove
// Light theme
$document-bg-color: $white;

// Shadows
$md-shadow1: 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.12);

// Screens
$tablet-width: 900px;
$mobile-width: 640px;
$small-mobile-width: 430px;

$signature-modal-shared-color: #e1e1e3;

// Headers
$headers-z-index: 72;

// Dark defaults for new ui:
$gray-3: #343a40;
$light-gray: #e7ebee;
/* stylelint-enable color-no-hex */

%open {
  &.open {
    visibility: visible;
  }
}

%closed {
  &.closed {
    visibility: hidden;
  }
}

:host {
  display: inline-block;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@mixin webComponent {
  .App.is-web-component & {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$tablet-width + 1px}) {
    .App:not(.is-web-component) & {
      @content;
    }
  }

  @container (min-width: #{$tablet-width + 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$mobile-width + 1px}) and (max-width: #{$tablet-width}) {
    @at-root .App:not(.is-in-desktop-only-mode):not(.is-web-component) & {
      @content;
    }
  }

  @container (min-width: #{$mobile-width + 1px}) and (max-width: #{$tablet-width}) {
    .App.is-web-component:not(.is-in-desktop-only-mode) & {
      @content;
    }
  }
}

@mixin tablet-and-desktop {
  @media (min-width: #{$mobile-width + 1px}) {
    @at-root .App:not(.is-in-desktop-only-mode):not(.is-web-component) & {
      @content;
    }
  }

  @container (min-width: #{$mobile-width + 1px}) {
    .App.is-web-component:not(.is-in-desktop-only-mode) & {
      @content;
    }
  }
}

@mixin mobile {
  @media (max-width: #{$mobile-width}) {
    @at-root .App:not(.is-in-desktop-only-mode):not(.is-web-component) & {
      @content;
    }
  }

  @container (max-width: #{$mobile-width}) {
    .App.is-web-component:not(.is-in-desktop-only-mode) & {
      @content;
    }
  }
}

@mixin small-mobile {
  @media (max-width: #{$small-mobile-width}) {
    @at-root .App:not(.is-in-desktop-only-mode):not(.is-web-component) & {
      @content;
    }
  }

  @container (max-width: #{$small-mobile-width}) {
    .App.is-web-component:not(.is-in-desktop-only-mode) & {
      @content;
    }
  }
}

@mixin tablet-and-mobile {
  @media (max-width: #{$tablet-width}) {
    @at-root .App:not(.is-in-desktop-only-mode):not(.is-web-component) & {
      @content;
    }
  }

  @container (max-width: #{$tablet-width}) {
    .App.is-web-component:not(.is-in-desktop-only-mode) & {
      @content;
    }
  }
}

@mixin ie11 {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

@mixin small-browser-height {
  @media (max-height: 500px) {
    .App:not(.is-web-component) & {
      @content;
    }
  }

  @container (max-height: 500px) {
    .App.is-web-component & {
      @content;
    }
  }
}

@mixin tiny-browser-height {
  @media (max-height: 320px) {
    .App:not(.is-web-component) & {
      @content;
    }
  }

  @container (max-height: 320px) {
    .App.is-web-component & {
      @content;
    }
  }
}

.hide-in-desktop {
  @include desktop {
    display: none;
  }
}

.hide-in-tablet {
  @include tablet {
    display: none;
  }
}

.hide-in-mobile {
  @media (max-width: #{$mobile-width}) and (min-width: #{$small-mobile-width + 1}) {
    .App:not(.is-web-component) & {
      display: none;
    }
  }

  @container (max-width: #{$mobile-width}) and (min-width: #{$small-mobile-width + 1}) {
    .App.is-web-component & {
      display: none;
    }
  }
}

.hide-in-small-mobile {
  @media (max-width: #{$small-mobile-width}) {
    .App:not(.is-web-component) & {
      display: none;
    }
  }

  @container (max-width: #{$small-mobile-width}) {
    .App.is-web-component & {
      display: none;
    }
  }
}

%cell {
  width: 30px;
  height: 26px;
  display: flex;
  margin: 1px;

  @include mobile {
    height: 30px;
    width: 13.5%;
  }
}

// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
%word-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

// Fixes default button styling, and prevents outline when not tabbing.
@mixin button-reset {
  padding: 0;
  border: none;
  background-color: transparent;

  @at-root html:not([data-tabbing='true']) #{&},
    :host(:not([data-tabbing='true'])) #{&} {
    outline: none;

    // No need to use this if you aren't doing custom focus style.
    // &::-moz-focus-inner {
    //   border: 0;
    // }
  }
}

// This is hack to have an explicit height for a panel. This is required because to use height auto
// we have to position a parent container. But doing so breaks mouse/touch coordinates. So we use calc
// to get an explicit height.
// https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height
@mixin panel-height-fix {
  height: calc(100% - 40px);

  &.logo-bar-enabled {
    height: calc(100% - $logo-bar-height);
  }

  &.tools-header-open {
    height: calc(100% - 80px);

    &.logo-bar-enabled {
      height: calc(100% - 80px - $logo-bar-height);
    }
  }

  &.multi-tab-active {
    height: calc(100% - 120px);

    &.logo-bar-enabled {
      height: calc(100% - 120px - $logo-bar-height);
    }

    @include tablet {
      height: calc(100% - 140px); // minus the height of both headers and of the tabs;

      &.logo-bar-enabled {
        height: calc(100% - 140px - $logo-bar-height);
      }
    }
  }

  @include desktop {
    height: calc(100% - 40px);

    &.logo-bar-enabled {
      height: calc(100% - 40px - $logo-bar-height);
    }

    &.tools-header-open {
      height: calc(100% - 74px); // minus the height of both headers;

      &.logo-bar-enabled {
        height: calc(100% - 74px - $logo-bar-height);
      }
    }

    &.multi-tab-active {
      height: calc(100% - 120px); // minus the height of both headers and of the tabs;

      &.logo-bar-enabled {
        height: calc(100% - 120px - $logo-bar-height);
      }
    }
  }

  @include tablet-and-desktop {
    height: calc(100% - 37px); // minus the height of the top header;

    &.ModularPanel {
      height: calc(
        100% - 49px
      ); // minus the height of the top header - in modular UI we change the height of the top header
    }

    &.logo-bar-enabled {
      height: calc(100% - 37px - $logo-bar-height);
    }

    &.tools-header-open {
      height: calc(100% - 76px); // minus the height of both headers;

      &.ModularPanel {
        height: calc(
          100% - 98px
        ); // minus the height of the top header - in modular UI we change the height of the top header
      }

      &.logo-bar-enabled {
        height: calc(100% - 76px - $logo-bar-height);
      }
    }

    &.multi-tab-active {
      height: calc(100% - 70px);

      &.ModularPanel {
        height: calc(
          100% - 85px
        ); // minus the height of the top header - in modular UI we change the height of the top header
      }

      &.logo-bar-enabled {
        height: calc(100% - 115px - $logo-bar-height);
      }

      &.tools-header-open {
        height: calc(100% - 110px); // minus the height of both headers and tabs;

        &.ModularPanel {
          height: calc(
            100% - 134px
          ); // minus the height of the top header - in modular UI we change the height of the top header
        }
      }
    }

    &.tools-header-and-header-hidden {
      height: 100%;

      &.logo-bar-enabled {
        height: calc(100% - $logo-bar-height);
      }

      &.multi-tab-active {
        height: calc(100% - 36px); // minus the height of both headers and of the tabs;

        &.logo-bar-enabled {
          height: calc(100% - 140px - $logo-bar-height);
        }
      }
    }
  }

  @include tablet {
    height: calc(100% - 53px); // minus the height of the top header;

    &.logo-bar-enabled {
      height: calc(100% - 53px - $logo-bar-height);
    }
  }

  &.tools-header-open {
    @include tablet {
      height: calc(100% - 104px); // minus the height of both headers;

      &.logo-bar-enabled {
        height: calc(100% - 104px - $logo-bar-height);
      }
    }
  }
}

.always-hide {
  display: none;
}

%custom-flyout-item-hover {
  cursor: pointer;
  background: var(--primary-button-hover);
  color: var(--gray-0);
}

%custom-flyout-item-active {
  cursor: pointer;
  background: var(--blue-5);
  color: var(--gray-0);
}

%default-button-hover {
  background: var(--primary-button-hover);
  border-color: var(--primary-button-hover);
  color: var(--gray-0);
}

%default-button-selected {
  background: var(--primary-button);
  border-color: var(--primary-button);
  color: var(--primary-button-text);
}

%default-button-disabled {
  cursor: default;
  background: var(--disabled-button-color);
  color: var(--primary-button-text);

  span {
    color: var(--primary-button-text);
  }
}

%secondary-button-hover {
  border: none;
  // This is a way to add the border without changing the size of the button
  box-shadow: inset 0 0 0 1px var(--blue-6);
  color: var(--blue-6);
}

%secondary-button-selected {
  border: none;
  // This is a way to add the border without changing the size of the button
  box-shadow: inset 0 0 0 1px var(--primary-button);
  color: var(--primary-button);
}

%secondary-button-disabled {
  cursor: default;
  border: none;
  // This is a way to add the border without changing the size of the button
  box-shadow: inset 0 0 0 1px rgba(43, 115, 171, 0.5);
  color: rgba(43, 115, 171, 0.5);

  span {
    color: rgba(43, 115, 171, 0.5);
  }
}

%tertiary-button-hover {
  border: none;
  background: none;
  color: var(--blue-6);

  .Icon {
    color: var(--blue-6);
  }
}

%tertiary-button-selected {
  border: none;
  background: none;
  color: var(--blue-5);

  .Icon {
    color: var(--blue-5);
  }
}

%tertiary-button-disabled {
  cursor: default;
  border: none;
  color: rgba(43, 115, 171, 0.5);

  .Icon {
    color: rgba(43, 115, 171, 0.5);
  }
}

%icon-button-hover {
  cursor: pointer;
  border: none;
  // This is a way to add the border without changing the size of the button
  box-shadow: inset 0 0 0 1px var(--blue-6);
  color: var(--blue-6);
  background-color: var(--faded-component-background);
}

%icon-button-active {
  border: none;
  // This is a way to add the border without changing the size of the button
  box-shadow: inset 0 0 0 1px var(--blue-5);
  color: var(--blue-5);
  background-color: var(--faded-component-background);

  .Icon {
    color: var(--blue-5);
  }
}

%icon-button-disabled {
  cursor: default;
  border: none;
  color: var(--gray-5);
}

%swipe-indicator {
  background: var(--swipe-indicator-bg);
  border-radius: 2px;
  height: 4px;
  width: 38px;
  position: absolute;
  inset-block-start: 12px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  inset-inline-start: 0;
  inset-inline-end: 0;

  @include tablet-and-desktop {
    display: none;
  }
}
