@use '@material/elevation/mixins' as elevation-mixins;
@use '@material/ripple/mixins' as ripple-mixins;
@use '@material/theme/theme';
@use '@material/theme' as theme-color;
@use '../global/index' as global;

$demo-toolbar-progress-bar-color: secondary !default;
$demo-toolbar-progress-buffer-color: primary !default;
$demo-section-margin: 48px;
$demo-color-custom: theme-color.$red-500;
$demo-color-low-luminance: theme-color.$brown-900;
$demo-color-high-luminance: theme-color.$amber-50;

.demo-theme {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  background-color: gray;

  dt,
  dd {
    height: 80px;
    padding: 8px;
    margin-bottom: 1px;
  }

  dt {
    width: 100%;
  }

  dd {
    width: 50%;
    margin-left: 0;
  }
}

.demo-text-theme {
  padding: 2px;
  background-color: gray;

  ul {
    display: flex;
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
    width: 20%;
    height: 40px;
    line-height: 40px;
    border-right: 1px solid;
    text-align: center;

    &:last-child {
      margin: 0;
    }
  }
}

.page-styles_color {
  figure {
    margin-left: 0;
    margin-right: 0;
  }

  .hero button {
    margin: 24px;
  }

  .demo-fixed-theme {
    position: fixed;
    top: 70px;
    right: 0;
    z-index: 3;
  }

  @media (max-width: global.$mobile-breakpoint) {
    .demo-fixed-theme {
      top: 110px;
    }
  }

  .demo-main {
    display: flex;
    flex-wrap: wrap;
  }

  .demo-component-section {
    position: relative;
  }
  .demo-component-section + .demo-component-section {
    margin-top: $demo-section-margin;
  }
  .demo-component-section::before {
    content: '';
    display: block;
    position: absolute;
    top: -16px;
    left: -16px;
    right: -16px;
    bottom: -16px;
    z-index: -1;
    background: theme-color.$yellow-700;
    opacity: 0;
    transition: opacity 1s;
  }
  .demo-component-section--flash::before {
    opacity: 0.5;
    transition: none;
  }
  .demo-component-section__permalink {
    color: inherit;
    opacity: 0;
    .demo-component-section:hover &,
    .demo-component-section__heading--focus-within & {
      opacity: 1;
    }
  }
  //
  // CSS class demo
  //
  .demo-theme-color-section + .demo-theme-color-section {
    margin-top: 36px;
  }
  .demo-theme-color-section__row {
    display: flex;
    flex-wrap: wrap;
  }
  .demo-fieldset--color {
    margin-right: 36px;
  }
  .demo-theme-color-group {
    padding: 16px 0;
  }
  .demo-theme-color-swatches {
    display: inline-flex;
    flex-direction: column;
    margin-right: 16px;
  }
  .demo-theme-color-swatch {
    @include elevation-mixins.elevation(1);
    display: inline-block;
    box-sizing: border-box;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 8px;
    border-radius: 4px;
  }
  .demo-theme-bg--low-luminance {
    background-color: $demo-color-low-luminance;
  }
  .demo-theme-bg--high-luminance {
    background-color: $demo-color-high-luminance;
  }
  .demo-theme-bg--custom-light {
    background-color: #dddddd;
  }
  .demo-theme-bg--custom-dark {
    background-color: #1d1d1d;
  }
  .demo-theme-text-row {
    display: inline-flex;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #f0f0f0;
    align-items: center;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .demo-theme-text-row {
      flex-direction: row;
    }
  }
  .demo-theme-text-style {
    padding: 0 16px;
  }
  //
  // Button demo
  //
  .demo-fieldset--button + .demo-fieldset--button {
    margin-top: 16px;
  }
  .demo-button__code {
    font-size: smaller;
    text-transform: none;
  }
  //
  // Card demo
  //
  .demo-card-wrapper {
    display: inline-block;
    margin: 0 24px 24px 0;
    vertical-align: top;
  }
  .demo-card__media {
    background-image: url('../images/1-1.jpg');
  }
  .demo-card__media--16-9 {
    background-image: url('../images/16-9.jpg');
  }
  //
  // Checkbox demo
  //
  .demo-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .demo-checkbox-wrapper,
  .demo-checkbox-toggle-button {
    margin-right: 10px;
  }
  .demo-checkbox-wrapper + .demo-checkbox-toggle-button {
    margin-left: 20px;
  }
  //
  // Dialog demo
  //
  .demo-dialog {
    position: relative;
    justify-content: flex-start;
    z-index: auto;
  }
  //
  // Drawer demo
  //
  .demo-drawer-toggle {
    @include ripple-mixins.states(on-primary);
    vertical-align: middle;
    cursor: pointer;
  }
  //
  // Floating Action Button (FAB) demo
  //
  .demo-fab-row {
    display: flex;
    flex-wrap: wrap;
  }
  .demo-fab {
    margin: 16px 0 0 0;
  }
  .demo-fab-tile {
    margin: 0 48px 1em 0;
  }
  .demo-fab-tile__title {
    font-weight: 500;
  }
  .demo-fab-tile__snippet {
    height: 2em;
  }
  //
  // Icon Toggle demo
  //
  .mdc-icon-button {
    // .material-icons and .mdc-icon-button each set different `display` values. Whichever CSS file is imported last
    // will win, so prevent them from fighting by specifying the value we want here.
    display: inline-flex;
  }
  .demo-icon-toggle-row {
    display: flex;
    flex-wrap: wrap;
  }
  .demo-icon-toggle-tile {
    width: 200px;
    margin: 0 10px 10px 0;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
  }
  //
  // Linear Progress demo
  //
  .demo-progress-row {
    margin: 32px 0;
  }
  .demo-progress-row + .demo-progress-row {
    margin-top: 64px;
  }
  //
  // Radio Button demo
  //
  .demo-radio-group {
    display: inline-block;
    margin: 0 24px 24px 0;
  }
  .demo-radio-form-field {
    margin-right: 8px;
  }
  //
  // Switch demo
  //
  .demo-switch-wrapper {
    display: inline-block;
    margin: 16px 16px 0 0;
  }
  //
  // Tab Bar demo
  //
  .demo-figure--tab-bar + .demo-figure--tab-bar {
    margin-top: 36px;
  }
  .demo-tab-bar {
    margin: 0;
  }
  //
  // Text Field demo
  //
  .demo-text-field-wrapper {
    display: inline-block;
    margin: 16px 16px 0 0;
  }
  .demo-text-field {
    margin-top: 0 !important;
  }
}

.component-section {
  width: 90%;
  min-height: 240px;
  margin: 10px 5% 40px;

  .mdc-typography--headline6 {
    margin-top: 0;
  }

  .component-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    &.space-around {
      justify-content: space-around;
    }

    &.no-flex {
      display: block; // Fuck IE
    }

    .mdc-top-app-bar,
    .mdc-drawer {
      position: static;
      top: auto !important;
      z-index: 0;
      display: block;
    }

    .mdc-drawer {
      border-width: 1px;
      border-style: solid;
    }

    .mdc-menu-surface {
      z-index: 1;
    }

    .mdc-image-list__item {
      margin-bottom: 16px;
    }
  }

  .textfield-component,
  .select-component,
  .list-component {
    display: block;

    .mdc-form-field {
      margin-bottom: 16px;
    }

    .mdc-deprecated-list {
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: #fff;
    }
  }

  .menu-component {
    .mdc-menu-surface {
      top: 0;
    }
  }

  .mdc-image-list {
    column-count: 2;
    column-gap: 16px;
    max-width: 400px;
    max-height: 600px;
  }
}

@media (min-width: global.$MIN_WIDTH) {
  .component-section {
    width: 40%;
    margin: 10px 5% 20px;
  }
}

.switch-theme {
  .demo-theme-color-radio {
    display: block;
    border: 1px solid theme-color.$grey-500;
    border-radius: 50%;
  }
  .demo-theme-color-radio__inner {
    display: block;
    border: 11px solid;
    border-radius: 50%;
  }
  [data-theme='baseline'] .demo-theme-color-radio__inner {
    border-color: theme-color.$deep-purple-a700 theme-color.$teal-a400
      theme-color.$teal-a400 theme-color.$deep-purple-a700;
  }
  [data-theme='black'] .demo-theme-color-radio__inner {
    border-color: theme-color.$grey-900 theme-color.$light-green-a700
      theme-color.$light-green-a700 theme-color.$grey-900;
  }
  [data-theme='dark'] .demo-theme-color-radio__inner {
    border-color: theme-color.$amber-300 theme-color.$pink-400
      theme-color.$pink-400 theme-color.$amber-300;
  }
  [data-theme='shrine'] .demo-theme-color-radio__inner {
    border-color: #442b2d #fcb8ab #fcb8ab #442b2d;
  }

  .demo-theme-menu {
    min-width: 320px;
  }
  .demo-theme-menu__list-item--selected {
    background-color: theme-color.$grey-400;
  }
  .demo-theme-list {
    @include theme.prop(color, text-primary-on-light);
  }
}
