@use "../../node_modules/@material/card/mixins" as card;
@use "./components/mixins" as *;

body {
  min-width: 1080px;
  padding-left: mod(100% - 1px, 2px);  // improve alignment on odd width viewpoint
  overflow-x: auto;
  overflow-y: scroll;
  line-height: 1.15;  // TODO: imporve overall line-height management
  text-align: center;
  background-color: #f2f2f2;
  cursor: auto;
}

svg {
  fill: currentColor;
  transform: translate3d(0, 0, 0);
}

.app {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-family: // TODO: reconsider fonts
    Helvetica Neue, Helvetica, Arial,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, \5FAE\8F6F\96C5\9ED1,
    sans-serif;
  text-align: initial;
  color: #000000de;
  &:not(.app-high-saturation) ::selection {
    background-color: #c8e1ff;
  }
}
.app-edit {
  padding-bottom: 48px;
}

.card {
  @include card.fill-color(surface);
  @include card.shape-radius(medium);
  @include elevation(1);
  overflow: hidden;
}

.table {
  line-height: 36px;
  color: #000000de;
  th, td {
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
  }
  th {
    padding-top: 1px;
    font-weight: normal;
    color: #00000099;
  }
  td {
    border-top: 1px solid #e0e0e0;
  }
  tbody:first-child tr:first-child td {
    border-top: none;
  }
  tbody tr {
    &:hover {
      background-color: #0000000a;
    }
    &.-selected {
      background-color: rgba($primary, .08);
      .app-high-saturation & {
        background-color: rgba($primary, .16);
      }
    }
  }
}

@import "./components/BadgeButton";

@import "./JobSelector";
@import "./Slot";
@import "./Materia";
@import "./Condition";
@import "./Summary";
@import "./About";

@import "./FilterPanel";
@import "./LevelSyncPanel";
@import "./MateriaOverallPanel";
@import "./SharePanel";
@import "./ImportPanel";
@import "./SettingPanel";
@import "./GearMenu";
@import "./MateriaPanel";
@import "./ClanPanel";
