@use "normalize.css/normalize";

@use "chartist/dist/scss/chartist";
@use "chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip";
@use "react-mde/lib/styles/scss/react-mde-all";

@use "@material/shape" with (
  $small-component-radius: 4px,
  $medium-component-radius: 4px,
  $large-component-radius: 0px
);

@use "typography-variables";

@use "themes.module" as themes;

@use "@material/typography" with (
  $font-family: typography-variables.$body-font,
  $styles-headline1: map-get(typography-variables.$styles, headline1),
  $styles-headline2: map-get(typography-variables.$styles, headline2),
  $styles-headline3: map-get(typography-variables.$styles, headline3),
  $styles-headline4: map-get(typography-variables.$styles, headline4),
  $styles-headline5: map-get(typography-variables.$styles, headline5),
  $styles-headline6: map-get(typography-variables.$styles, headline6),
  $styles-body1: map-get(typography-variables.$styles, body1),
  $styles-body2: map-get(typography-variables.$styles, body2),
  $styles-subtitle1: map-get(typography-variables.$styles, subtitle1),
  $styles-subtitle2: map-get(typography-variables.$styles, subtitle2),
  $styles-button: map-get(typography-variables.$styles, button),
  $styles-overline: map-get(typography-variables.$styles, overline),
  $styles-caption: map-get(typography-variables.$styles, caption)
);

@use "theme";
@use "density";
@use "util";

@use "@material/button/mdc-button";
@use "@material/card/mdc-card";
@use "@material/checkbox/mdc-checkbox";
@use "@material/chips/mdc-chips";
@use "@material/data-table/mdc-data-table";
@use "@material/dialog/mdc-dialog";
@use "@material/drawer/mdc-drawer";
@use "@material/fab/mdc-fab";
@use "@material/floating-label/mdc-floating-label";
@use "@material/form-field/mdc-form-field";
@use "@material/icon-button/mdc-icon-button";
@use "@material/image-list/mdc-image-list";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/linear-progress/mdc-linear-progress";
@use "@material/list/mdc-list";
@use "@material/menu-surface/mdc-menu-surface";
@use "@material/menu/mdc-menu";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/radio/mdc-radio";
@use "@material/select/mdc-select";
@use "@material/slider/mdc-slider";
@use "@material/snackbar/mdc-snackbar";
@use "@material/switch/mdc-switch";
@use "@material/tab-bar/mdc-tab-bar";
@use "@material/tab-indicator/mdc-tab-indicator";
@use "@material/tab-scroller/mdc-tab-scroller";
@use "@material/tab/mdc-tab";
@use "@material/textfield/mdc-text-field";
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@rmwc/avatar/avatar";
@use "@rmwc/badge/badge";
@use "@rmwc/circular-progress/circular-progress";
@use "@rmwc/data-table/data-table";
@use "@rmwc/list/collapsible-list";
@use "@rmwc/icon/icon";
@use "@rmwc/tooltip/tooltip";

@use "@material/animation/_index" as animation;
@use "@material/elevation/_index" as elevation;
@use "@material/list/_index" as list;
@use "@material/theme/color-palette" as palette;
@use "@material/rtl/_index" as rtl;
@use "@material/top-app-bar/_index" as top-app-bar;

@include typography.core-styles();

* {
  box-sizing: border-box;
}

code {
  font-family: "Roboto Mono", monospace;
  white-space: nowrap;
  background-color: rgba(black, 0.25);
}

.multiline {
  white-space: pre-line;
}

.banner {
  height: 54px;
  display: flex;
  justify-content: stretch;
  @include util.divider-border(bottom);
  &-text {
    @include typography.typography(body2);
    display: flex;
    align-items: center;
    flex-grow: 1;
    @include rtl.reflexive-box(padding, left, 16px);
  }
  &-button {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
    a {
      text-decoration: none;
    }
  }
}

.skeleton {
  pointer-events: none;
  &-block {
    @include shape.radius(shape.resolve-percentage-radius(32px, small));
  }
}

.sales-image,
.sales-image img,
.details-image,
.image-details .image,
.image-display,
.mdc-list-item__graphic.image,
.list-image-container {
  @include shape.radius(shape.resolve-percentage-radius(16px, medium));
}

.rtl-flip {
  @include rtl.rtl {
    transform: scaleX(-1);
    animation: none;
    opacity: 1;
  }
}

:focus {
  outline: none;
}

:root {
  -webkit-tap-highlight-color: transparent;
}

.scroll-lock {
  overflow: hidden;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-in-scale {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes placeholder {
  from {
    background-color: var(--theme-lighter-divider);
  }
  50% {
    background-color: var(--theme-divider);
  }
  to {
    background-color: var(--theme-lighter-divider);
  }
}

@each $theme-name, $theme in themes.$themes-map {
  .#{"" + $theme-name} {
    @include theme.theme($theme, map-get($theme, dark));
  }
}

// external

.mdl-button.firebaseui-idp-button {
  font-family: typography-variables.$body-font;
}

.react-mde.markdown-editor {
  @include shape.radius(small);
  .markdown-editor {
    &__textarea {
      @include typography.typography(subtitle1, $exclude-props: (line-height));
      @include shape.radius(small);
    }
  }
}

// chartist

.ct-chart {
  .ct-grid {
    stroke: var(--theme-divider);
    stroke-dasharray: 4px;
  }
  .ct-axis-title {
    @include typography.typography(caption);
  }
  .ct-stroked-point {
    pointer-events: all !important;
    stroke: transparent;
    stroke-width: 24px;
  }
}

.chartist-tooltip {
  @include typography.typography(caption);
  @include shape.radius(shape.resolve-percentage-radius(2rem, small));
  animation: animation.standard(rmwcToolTipOut, 0.075s);
  text-align: left;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0.33rem 1rem;
  min-height: 2rem;
  min-width: 0;
  white-space: pre-wrap;
  &::before {
    content: none !important;
  }
  &.tooltip-show {
    animation: animation.standard(rmwcToolTipIn, 0.15s);
  }
  &-meta {
    font-weight: bold;
    &::after {
      content: ": ";
    }
  }
}

// MUI

$mui-typography-map: (
  h1: headline1,
  h2: headline2,
  h3: headline3,
  h4: headline4,
  h5: headline5,
  h6: headline6,
  subtitle1: subtitle1,
  subtitle2: subtitle2,
  body1: body1,
  body2: body2,
  button: button,
  caption: caption,
  overline: overline,
);

.mdc-typography .MuiTypography {
  @each $style, $val in $mui-typography-map {
    &-#{$style} {
      @include typography.typography($val);
    }
  }
}

body {
  .MuiPickersStaticWrapper-staticWrapperRoot {
    background-color: transparent;
    .MuiPickersCalendarHeader-iconButton:not(:hover) {
      background-color: transparent;
    }
    .MuiPickersBasePicker-pickerView {
      align-self: center;
    }
  }
}

// MDC

.mdc-drawer {
  @include util.divider-border(right);
  @include rtl.rtl {
    @include util.divider-border(left);
  }
  &.drawer-bottom {
    width: 100%;
    height: auto;
    max-height: 100%;
    @include util.divider-border(top);
    &.mdc-drawer--animate {
      transform: translateY(101%);
    }
    &.mdc-drawer--opening {
      transform: translateY(0);
    }
    &.mdc-drawer--closing {
      transform: translateY(101%);
    }
    @include shape.radius(large large 0 0);
  }
  &.drawer-right {
    width: 320px;
    border-right-width: 0;
    @include util.divider-border(left);
    @include rtl.reflexive-position(left, initial);
    @include rtl.reflexive-position(right, 0);
    &.mdc-drawer--animate,
    &.mdc-drawer--closing {
      transform: translateX(100%);
      @include rtl.rtl {
        transform: translateX(-100%);
      }
    }
    &.mdc-drawer--opening {
      transform: translateX(0);
      @include rtl.rtl {
        transform: translateX(0);
      }
    }
    &.mdc-drawer--open.mdc-drawer--dismissible:not(.mdc-drawer--closing)
      ~ .mdc-drawer-app-content {
      @include rtl.reflexive-property(margin, 0, 320px);
    }
    @include rtl.rtl {
      border-left-width: 0;
      @include util.divider-border(right);
      left: 0;
      right: initial;
    }
    @include shape.radius(large 0 0 large, true);
  }
  &__header {
    .mdc-icon-button:last-child {
      @include rtl.reflexive-box(margin, right, -12px);
    }
  }
  &__content {
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .mdc-list-item,
  .mdc-list-item:first-child {
    margin: 0;
    @include shape.radius(0);
  }
  .mdc-menu {
    .mdc-list-item {
      height: 56px;
      @include typography.typography(subtitle1);
    }
    .mdc-list-group__subheader {
      display: flex;
      align-items: center;
      height: 24px;
      padding: 4px 16px;
      @include typography.typography(caption);
      .rmwc-icon {
        @include rtl.reflexive-box(margin, right, 16px);
      }
    }
  }
  .group-collapsible .rmwc-collapsible-list {
    &__handle .mdc-list-item {
      height: 40px;
    }
  }
  .content-container &.mdc-drawer--dismissible {
    height: calc(100% - #{top-app-bar.$row-height});
    @media (max-width: top-app-bar.$mobile-breakpoint) {
      height: calc(100% - #{top-app-bar.$mobile-row-height});
    }
  }
}

.mdc-image-list__item {
  @include shape.radius(medium);
  overflow: hidden;
}

.mdc-linear-progress {
  @include rtl.rtl {
    transform: scaleX(-1);
  }
}

.mdc-list {
  &.theme-list {
    @include shape.radius(
      shape.resolve-percentage-radius(list.$single-line-height, small)
    );
  }
  &-group {
    &__subheader {
      @include typography.typography(caption);
      margin: 0;
      padding: 0 16px;
      height: 32px;
    }
  }
  &--two-line.three-line .mdc-list-item,
  &-item.three-line {
    height: 88px;
    .mdc-list-item__text {
      align-self: unset;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .overline {
        @include typography.typography(overline);
        font-family: inherit;
        line-height: 1rem;
        align-self: flex-start;
      }
      .mdc-list-item__primary-text {
        margin: 2px 0;
        display: flex;
        align-items: center;
        &::before,
        &::after {
          content: none;
        }
      }
      .mdc-list-item__secondary-text {
        &::before {
          content: none;
        }
      }
    }
  }
}

.mdc-menu .mdc-list-item {
  white-space: nowrap;
}

.mdc-top-app-bar {
  &.is-contextual {
    transition: elevation.transition-value(), background-color 100ms linear,
      color 100ms linear;
    .mdc-top-app-bar__navigation-icon,
    .mdc-top-app-bar__action-item,
    .mdc-top-app-bar__title {
      transition: color 100ms linear;
    }
  }
}

.mdc-button.mdc-button--outlined,
.mdc-card.mdc-card--outlined,
.mdc-data-table {
  @include util.divider-border();
}

.mdc-data-table__row,
.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions {
  @include util.divider-border(top);
}

.mdc-list-divider,
.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title {
  @include util.divider-border(bottom);
}

.material-icons,
.mdc-button,
.time-indicator,
.mdc-card__primary-action,
.profile-title,
.mdc-list-item,
.mdc-image-list__item,
.mdc-tab,
.mdc-top-app-bar,
.mdc-chip {
  user-select: none;
}

.mdc-ripple-upgraded::before {
  transition-duration: 100ms !important;
}

.mdc-slider {
  &__thumb-container {
    height: auto;
  }
  &__pin {
    display: flex;
    align-items: center;
    transform: scale(0) translateX(-50%);
    transform-origin: bottom left;
    @include shape.radius(shape.resolve-percentage-radius(2rem, small));
    min-height: 2rem;
    padding: 0.33rem 1rem;
    width: auto;
    height: auto;
    margin: 0;
    top: auto;
    bottom: 25px;
    left: 50%;
    will-change: transform;
    transition-duration: 200ms;
    transition-timing-function: animation.$standard-curve-timing-function;
    &-value-marker {
      @include typography.typography(caption);
      transform: none;
    }
    &::before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      left: 50%;
      bottom: -6px;
      margin-left: -6px;
      border-width: 6px 6px 0;
    }

    @media (min-width: 768px) {
      padding: 0.33rem 0.5rem;
      min-height: 1.5rem;
    }
  }
  &--discrete.mdc-slider--active {
    .mdc-slider__pin {
      transform: scale(1) translateX(-50%);
    }
  }
}

.mdc-chip {
  &[disabled] {
    cursor: default;
    .mdc-chip__ripple {
      &::before,
      &::after {
        content: none;
      }
    }
  }
}

.mdc-data-table {
  background-color: transparent;
  &.rounded {
    border-radius: shape.resolve-percentage-radius(56px, small)
      shape.resolve-percentage-radius(56px, small)
      shape.resolve-percentage-radius(52px, small)
      shape.resolve-percentage-radius(52px, small);
  }
  .mdc-data-table__header-row {
    .mdc-data-table__header-cell {
      @include typography.typography(subtitle2);
      font-weight: bold;
      vertical-align: middle;
      .rmwc-data-table__sort-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
  .mdc-data-table__row {
    transition: background-color 100ms;
    .mdc-data-table__cell {
      @include typography.typography(body2);
      overflow: visible;
      .vendor-container {
        @include shape.radius(small);
      }
    }
  }
}

svg.material-icons,
.material-icons svg {
  fill: currentColor;
}

.mdc-checkbox {
  &__checkmark {
    padding: 2px;
  }
  &__mixedmark {
    width: calc(100% - 6px);
  }
}

.mdc-text-field {
  .search-bar--persistent &.search-bar__field {
    @include shape.radius(shape.resolve-percentage-radius(40px, small));
  }
  &.mdc-text-field--textarea {
    .mdc-text-field__input {
      min-height: 56px - 8px;
    }
  }
}

// RMWC

.rmwc-data-table__head-cell--sorted .rmwc-data-table__sort-icon {
  transform: rotate(0);
}

.rmwc-collapsible-list--open
  > .rmwc-collapsible-list__handle
  .mdc-list-item__meta,
.mdc-select--activated .mdc-select__dropdown-icon,
.rmwc-data-table__head-cell--sorted.rmwc-data-table__head-cell--sorted-ascending
  .rmwc-data-table__sort-icon,
.rmwc-data-table__sort-icon {
  transform: rotate(180deg);
}

.rmwc-avatar {
  background-color: var(--theme-divider);
}

.rmwc-badge.material-icons {
  text-transform: none;
  font-size: 18px;
  line-height: 18px;
  width: 26px;
  height: 26px;
  padding: 4px;
  &.rmwc-badge--align-start,
  &.rmwc-badge--align-end {
    top: -13px;
  }
  &.rmwc-badge--align-start,
  [dir="rtl"] &.rmwc-badge--align-end {
    left: -13px;
    right: auto;
  }
  &.rmwc-badge--align-end,
  [dir="rtl"] &.rmwc-badge--align-start {
    right: -13px;
    left: auto;
  }
}

.rmwc-icon--url[disabled],
.rmwc-icon--component[disabled],
[disabled] > .rmwc-icon--url,
[disabled] > .rmwc-icon--component {
  opacity: 1;
}

.rmwc-tooltip {
  @include typography.typography(caption);
  &-inner {
    @include shape.radius(shape.resolve-percentage-radius(2rem, small));
  }
}
