@use '@angular/material' as mat;
@import "@angular/material/theming";

@mixin d2c-styles-reset-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  

  a {
    color: mat.get-color-from-palette($foreground, text);

    &:hover {
      color: mat.get-color-from-palette($accent);
    }
  }
  
  .hover-like-button {
    //border: solid 2px  mat-color($background, unselected-chip);;
    border: solid 2px   mat.get-color-from-palette($accent);
    border-radius: 3px;    

    &:hover {
      transform: scale(1.2, 1.2);
      transition: 0.2s ease-in-out;
      filter: saturate(1.5);
    }
  }


  .solid-border {
    border-color: mat.get-color-from-palette($foreground, divider);
    border-style: solid;
    padding: 5px;
    margin: 2px;
  }

  .dashed-border {
    border-color: mat.get-color-from-palette($foreground, divider);
    border-style: dashed;
    padding: 5px;
    margin: 2px;
  }

  .selected-dashed-border {
    border-color: mat.get-color-from-palette($accent, 700) !important;
  }

  .inactive-text {
    color: mat.get-color-from-palette($foreground, divider);
  }

  .divider-border {
    border: 1px solid black;
  }

  .divider {
    border-color: mat.get-color-from-palette($foreground, divider);
    border-top-style: solid;
    border-bottom-style: none;
  }


  div.bottom-divider {
    border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
  }
  
  div.top-divider {
    border-top: 1px solid mat.get-color-from-palette($foreground, divider);
  }

  code {
    color: mat.get-color-from-palette($accent, lighter-contrast);
    background-color: mat.get-color-from-palette($accent, lighter);
  }

  .bounty-chip {    
    background-color: mat.get-color-from-palette($background, unselected-chip);
    color: mat.get-color-from-palette($foreground, unselected-chip);
    // background-color: #e0e0e0;
    // color: rgba(0,0,0,.87);
    padding: 4px 12px;
    margin: 3px;
    border-radius: 16px;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
  }

  .primary-bg-text {
    color: mat.get-color-from-palette($primary, default-contrast);
    background-color: mat.get-color-from-palette($primary);
  }

  .transparent-icon {
    background-size: cover;
    background-color: mat.get-color-from-palette($primary);
    opacity: 0.9;
  }

  .accent-bg-text {
    color: mat.get-color-from-palette($accent, default-contrast) !important;
    background-color: mat.get-color-from-palette($accent) !important;
  }

  .warn-bg-text {
    color: mat.get-color-from-palette($warn, default-contrast);
    background-color: mat.get-color-from-palette($warn);
  }

  .accent-text {
    color: mat.get-color-from-palette($accent, 700);
  }

  .disabled-text {
    color: mat.get-color-from-palette($foreground, disabled);
  }

  .masterworked {
    box-shadow: 0 0 10px mat.get-color-from-palette($accent, 700);
  }

  .pinnacle {    
    box-shadow: 0 0 5px 0px mat.get-color-from-palette($accent, 700);
  }

  .warn-text {
    color: mat.get-color-from-palette($warn) !important;
  }

  .primary-text {
    color: mat.get-color-from-palette($primary);
  }

  .secondary-text {
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .bold {
    font-weight: bold;
  }


  .subtitle {
    font-size: 14px;
    opacity: 0.54;
  }


  .simple-caption-no-color {
    margin: 5px 0 7px;
    font-size: smaller;
    font-weight: lighter;
  }


  .simple-caption {
    margin: 5px 0 7px;
    font-size: smaller;
    font-weight: lighter;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .simple-caption-darker {
    margin: 5px 0 7px;
    font-size: smaller;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .normal-weight {
    font-weight: 400;
  }


  .simple-darker-larger-caption {
    margin: 5px 0 7px;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .simple-caption-darker-no-margin {
    font-size: smaller;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .simple-darker-caption-no-margin {
    font-size: smaller;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }


  .simple-caption-no-margin {
    font-size: smaller;
    font-weight: lighter;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .simple-caption-darker-no-margin {
    font-size: smaller;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .right-margin {
    margin-right: 10px;
  }

  .simple-warn-caption {
    margin: 5px 0 7px;
    font-size: smaller;
    font-weight: lighter;
    opacity: 0.8;
    color: mat.get-color-from-palette($warn);
  }

  .type-caption {
    font-size: smaller;
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  .check-progress-bar {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
  }

  .light-border {
    border: 1px solid mat.get-color-from-palette($background, unselected-chip);
  }

  table.responsive-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1250px;
    table-layout: auto;

    & caption {
      font-size: 16px;
      margin: 5px 0 7px;
    }

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);

      padding: 5px;
    }

    & td {
      padding: 8px;
      text-align: center;
      vertical-align: top;
    }

    & td.lead {
      padding: 8px;
      vertical-align: top;
      text-align: left;
      font-weight: bold;

      & .caption {
        float: right;
        font-size: smaller;
        font-weight: lighter;
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    & th {
      padding: 8px;
      text-align: center;
      font-size: 12px;
      color: mat.get-color-from-palette($foreground, secondary-text);
      //text-transform: uppercase;
    }
  }


  @media screen and (max-width: map-get($grid-breakpoints, mxl)) {
    .mat-tab-label {
      min-width: 100px;
    }

    .mat-tab-link {
      min-width: 100px;
    }
  }

  @media screen and (max-width: map-get($grid-breakpoints, md)) {
    .mat-tab-label {
      min-width: 100px;
    }

    .mat-tab-link {
      min-width: 100px;
    }
  }

  @media screen and (max-width: 650px) {
    .mat-tab-label {
      min-width: 50px;
    }

    .mat-tab-link {
      min-width: 50px;
    }
  }

  .responsive-table-inline-mobile-only {
    display: none;
  }


  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
    .responsive-table-inline-mobile-only {
      display: inline;
    }

    .check-progress-bar {

      margin-top: unset;
      margin-right: unset;
      // margin-left: auto;
    }

    table.responsive-table {
      border: 0;

      & caption {
        font-size: 15px;
      }

      & thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      & tfoot {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      & tr {
        border-bottom: 3px solid mat.get-color-from-palette($background, status-bar);
        display: block;
        margin-bottom: 8px;
      }

      & td {
        border-bottom: 1px solid mat.get-color-from-palette($background, status-bar);
        display: block;
        font-size: 10px;
        text-align: right;
      }

      & td.lead {
        font-weight: bold;
        border-bottom: 1px solid mat.get-color-from-palette($background, status-bar);
        display: block;
        font-size: 10px;
        text-align: left;
      }

      & td:before {
        content: attr(data-label);
        float: left;
      }

      & td:last-child {
        border-bottom: 0;
      }
    }
  }

  .tidy-cell {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;
  }


  th.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: mat.get-color-from-palette($background, card);
  }

  table.striped {
    & tbody {
      & tr:nth-child(even) {
        background: mat.get-color-from-palette($background, card);
      }

      & tr:nth-child(odd) {
        background: mat.get-color-from-palette($background, status-bar)
      }
    }
  }

  table.simple-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);
      padding: 5px;
    }

    & td {
      padding: 8px;
      text-align: left;
    }

    & th {
      padding: 8px;
      text-align: left;
      font-size: 12px;
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }


  table.tidy-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1250px;
    table-layout: fixed;

    & caption {
      font-size: 16px;
      margin: 5px 0 7px;
    }

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);

      padding: 5px;
    }


    & td {
      padding: 8px;
      text-align: left;
      vertical-align: top;
    }

    & td.lead {
      padding: 8px;
      text-align: left;
      font-weight: bold;

      & .caption {
        float: right;
        font-size: smaller;
        font-weight: lighter;
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    & th {
      padding: 8px;
      text-align: left;
      font-size: 12px;
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }

  table.tidy-auto-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    max-width: 1250px;
    table-layout: auto;

    & caption {
      font-size: 16px;
      margin: 5px 0 7px;
    }

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);

      padding: 5px;
    }

    & td {
      padding: 8px;
      text-align: left;
      vertical-align: top;
    }

    & td.lead {
      padding: 8px;
      text-align: left;
      font-weight: bold;

      & .caption {
        float: right;
        font-size: smaller;
        font-weight: lighter;
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    & th {
      padding: 8px;
      text-align: left;
      font-size: 12px;
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }


  table.gear-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);
    }

    & td.lead {
      & .caption {
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    & th {
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }

  table.recent-players-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    min-width: 300px;
    max-width: 800px;

    table-layout: auto;

    & caption {
      font-size: 16px;
      margin: 5px 0 7px;
    }

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);

      padding: 5px;
    }

    & td {
      padding: 8px;
      text-align: left;
      vertical-align: top;
    }

    & td.lead {
      padding: 8px;
      text-align: left;
      font-weight: bold;

      & .caption {
        float: right;
        font-size: smaller;
        font-weight: lighter;
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    & th {
      padding: 8px;
      text-align: left;
      font-size: 12px;
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }

  table.checklist-table {
    border: 1px solid mat.get-color-from-palette($background, disabled-list-option);
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    // width: 100%;
    max-width: 750px;
    table-layout: fixed;

    & caption {
      font-size: 16px;
      margin: 5px 0 7px;
    }

    & tr {
      background: mat.get-color-from-palette($background, card);
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);

      padding: 5px;
    }

    & td {
      padding: 8px;
      text-align: left;
    }

    & td.lead {
      padding: 8px;
      text-align: left;
      font-weight: bold;

      & .caption {
        float: right;
        font-size: smaller;
        font-weight: lighter;
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    & th {
      padding: 8px;
      text-align: left;
      font-size: 12px;
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }

  tr.hover-row:hover {
    background: mat.get-color-from-palette($background, app-bar);
    border-bottom-width: 2px;
    border-top-width: 2px;
    cursor: pointer;
  }

  @media (max-width: map-get($grid-breakpoints, sm)) {
    table.checklist-table {
      width: 100%;
    }
  }

  $list-table-padding: 4px;
  table.list-table {
    border-collapse: collapse;
    // border: 1px solid mat-color($background, disabled-list-option);
    margin: 0 auto 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1250px;
    table-layout: auto;
    & caption {
      font-size: 16px;
      margin: 5px 0 7px;
    }
    & tr {
      padding: 5px;
      border: 1px solid mat.get-color-from-palette($background, unselected-chip);
    }
    & td {
      font-size: 14px;
      padding: $list-table-padding;
      text-align: left;
      vertical-align: middle;
      & .caption {
        float: right;
        font-weight: lighter;
      }
    }
    & td.lead {
      padding: $list-table-padding;
      text-align: left;
      font-weight: bold;
      & .caption {
        float: right;
        font-size: smaller;
        font-weight: lighter;
      }
    }
    & th {
      padding: $list-table-padding;
      text-align: left;
      font-size: 12px;
      vertical-align: top;
    }
  }
  
}