@use '../../base/token';
@use '../../abstract';

$board-sidebar-hide-breakpoint: 1440px;
$board-sidebar-resize-breakpoint: 1612px;

.cds-board-view-fluid {
  $this: &;

  &__container {
    width: 100%;
    max-width: 864px;
    margin: 0 auto;
  }

  &__content-wrapper {
    padding-block-start: 48px;
    padding-block-end: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  &__content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 864px) minmax(0, 1fr);
    gap: 64px;
  }

  &__sidebar {
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 168px;

    &--left {
      display: flex;
      justify-content: flex-end;
    }

    &--right {
      display: flex;
      justify-content: flex-start;
    }
  }
}

.cds-board-view {
  $this: &;

  display: flex;
  flex-direction: column;

  &__content-container {
    padding: 40px 32px;
  }

  &__top {
    padding: 40px 32px;
    border-bottom: 1px solid var(--gray-100);

    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  &__breadcrumbs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;

    > li {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
    }
  }

  &__breadcrumb {
    color: var(--gray-500);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: #{token.$font-size-1};
    line-height: #{token.$line-heights-8}px;

    cursor: pointer;
  }

  &__badge {
    margin-bottom: 12px;
  }

  &__title {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: #{token.$font-size-6};
    line-height: #{token.$line-heights-4}px;
    color: var(--gray-700);

    word-break: keep-all;
  }

  &__title-icon {
    display: inline-block;
    margin-left: 16px;

    &:empty {
      display: none;
    }

    span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      font-size: 0;
      vertical-align: middle;
    }

    span + span {
      margin-left: 8px;
    }
  }

  &__file-icon {
    border-radius: 4px;
    background: var(--gray-100);
  }

  &_sub-title {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
    font-size: var(--font-size-2) px;
    line-height: #{token.$line-heights-8}px;
    color: var(--gray-400);

    word-break: keep-all;
  }

  &__meta-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__date {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: var(--font-size-1);
    line-height: #{token.$line-heights-9}px;
    color: var(--gray-300);
  }

  &__contents {
    padding-inline: 32px;
  }

  &__additional-contents {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  &__attachments {
    border-top: 1px solid var(--gray-100);
    padding-top: 24px;
  }

  &__attachments-top {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: var(--font-size-1);
    line-height: #{token.$line-heights-9}px;
  }

  &__attachments-top-title {
    color: var(--gray-700);
  }

  &__attachments-top-count {
    color: var(--blue-500);
  }

  &__attachments-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__bottom-contents {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  &__left-side {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  &__like-comment-btn {
    color: var(--gray-300);
    padding: 0;
  }

  &__right-side {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  &__bottom {
    border-top: 1px solid var(--gray-100);
    padding-top: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  &__move-page {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  &__move-page-label {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: var(--font-size-1);
    line-height: #{token.$line-heights-9}px;
    color: var(--gray-500);
    width: 28px;
  }

  &__move-page-title {
    margin-left: 12px;

    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: var(--font-size-1);
    line-height: #{token.$line-heights-9}px;
    color: var(--gray-700);

    @include abstract.ellipsis(1);
    width: calc(100% - 56px);

    cursor: pointer;
  }

  &__go-list {
    margin-top: 24px;
  }
}

@media (max-width: $board-sidebar-resize-breakpoint) {
  .cds-board-view-fluid {
    &__content-grid {
      gap: 10px;
    }
  }
}

@media (max-width: $board-sidebar-hide-breakpoint) {
  .cds-board-view-fluid {
    &__content-grid {
      grid-template-columns: minmax(0, 864px);
    }

    &__sidebar {
      display: none;
    }
  }
}

@media (max-width: 768px) {
  .cds-board-view-fluid {
    &__content-wrapper {
      padding-inline: 0;
      padding-block-start: 0;
      padding-block-end: 0;
    }
  }

  .cds-board-view {
    $this: &;
    gap: 0;
    margin-top: 0;

    &__top {
      padding-inline: 16px;
    }

    &__bottom {
      padding-inline: 16px;
    }

    &__title {
      font-size: #{token.$font-size-5};
      line-height: #{token.$line-heights-5}px;
    }

    &__contents {
      padding-inline: 16px;
      padding-block-start: 48px;
      padding-block-end: 40px;
    }

    &__go-list {
      width: 100%;
    }
  }
}