@import './reset';
@import './react-tags-input';
@import './mui';
@import './mixin';

:root {
  // breakpoint
  --bp-xs: 320px;
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1080px;
  --bp-xl: 1280px;
  --bp-xxl: 1440px;

  // color
  --primary-09: #183f00;
  --primary-08: #2e5203;
  --primary-07: #44661b;
  --primary-06: #598022;
  --primary-05: #739f36;
  --primary-04: #98c354;
  --primary-03: #c0e085;
  --primary-02: #ddeeba;
  --primary-01: #fbfff0;
  --neutral-09: #1e1e1e;
  --neutral-08: #4b4b4b;
  --neutral-07: #626262;
  --neutral-06: #787878;
  --neutral-05: #8e8e8e;
  --neutral-04: #bcbcbc;
  --neutral-03: #d2d2d2;
  --neutral-02: #ededed;
  --neutral-01: #f9f9f9;
  --neutral-white: #fff;
  --red-09: #400002;
  --red-08: #530707;
  --red-07: #661417;
  --red-06: #802226;
  --red-05: #9e3f3f;
  --red-04: #c25b5b;
  --red-03: #db8784;
  --red-02: #ffd7d6;
  --red-01: #fff6f5;
  --blue-09: #001840;
  --blue-08: #0a2653;
  --blue-07: #1b3866;
  --blue-06: #224680;
  --blue-05: #365e9f;
  --blue-04: #547fc3;
  --blue-03: #86a8e0;
  --blue-02: #baceee;
  --blue-01: #f4f8ff;
  --yellow-09: #4e2c00;
  --yellow-08: #593505;
  --yellow-07: #7a5008;
  --yellow-06: #8f6511;
  --yellow-05: #bd8c1a;
  --yellow-04: #ebbc3e;
  --yellow-03: #ffe58f;
  --yellow-02: #fcf3c4;
  --yellow-01: #fffced;
  --hover-color: rgb(30 30 30 / 4%);
  --overlay-color: rgb(30 30 30 / 60%);
  --popup-bg: #f7faf5;
  --post-bg: #f2f2f2;
  --cover-05: #e3bbea;
  --cover-04: #abd1eb;
  --cover-03: #c0e085;
  --cover-02: #ffd09a;
  --cover-01: #f18b8e;
  --container: 100vw;
  --gapWidth: 20px;
  --mobileHeaderHeight: 32px; // calc(44px + 32px);
  --mobileFooterHeight: 60px;
  --padding: 4px;
  --basePadding2: calc(var(--padding) * 2);
  --basePadding3: calc(var(--padding) * 3);
  --basePadding4: calc(var(--padding) * 4);
  --basePadding5: calc(var(--padding) * 5);
  --basePadding6: calc(var(--padding) * 6);
  --basePadding7: calc(var(--padding) * 7);
  --basePadding8: calc(var(--padding) * 8);
  --basePadding9: calc(var(--padding) * 9);
  --basePadding10: calc(var(--padding) * 10);
  --basePadding11: calc(var(--padding) * 11);
  --basePadding12: calc(var(--padding) * 12);
  --baseBorderRadius2: 2px;
  --baseBorderRadius4: 4px;
  --baseBorderRadius8: 8px;
  --baseBorderRadius12: 12px;

  // flycat
  @include for-desktop {
    --container: var(--bp-xl);
  }

  @include for-desktop-s {
    --container: calc(100vw - 80px * 2);
  }

  --gridColWidth: calc((var(--container) - var(--gapWidth) * 11) / 12);
}

.f-container {
  max-width: var(--container);
  margin-right: auto;
  margin-left: auto;

  > nav {
    height: 100%;
    border-right: 1px solid var(--neutral-02);
    grid-column: span 3;

    @include for-pad {
      grid-column: span 1;
    }
  }

  > main {
    grid-column: span 9;

    @include for-pad {
      grid-column: span 7;
    }
  }
}

.f-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  @include for-pad {
    grid-template-columns: repeat(8, 1fr);
  }

  @include for-mobile {
    grid-template-columns: repeat(4, 1fr);
  }
}

.f-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
