@use "../../../styles/abstracts/functions" as fun;
@use "../../../styles/abstracts/mixins" as mix;
@use "../../../styles/abstracts/placeholders";

.breadcrumb {
  @extend %grid;

  grid-column: 1 / -1;
  width: 100%;
  padding: var(--spacing-md) 0;

  > * {
    grid-column: 2;
    font-size: var(--font-size-sm);
  }
}

.header {
  grid-column: 1 / -1;
  margin-bottom: var(--spacing-md);
}

.body {
  grid-column: 2;

  > * + * {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
}

.sidebar {
  grid-column: 2;

  &--first {
    margin-bottom: var(--spacing-xs);

    @include mix.media("screen") {
      @include mix.dimensions("lg") {
        grid-column: 1;
        align-self: stretch;
        margin: 0 var(--spacing-xs) var(--spacing-md);
      }
    }
  }

  &--last {
    margin: var(--spacing-lg) 0 0;

    @include mix.media("screen") {
      @include mix.dimensions("md") {
        grid-column: 3;
        align-self: stretch;
        margin: 0 var(--spacing-xs) var(--spacing-md);
      }
    }
  }
}

.footer {
  grid-column: 2;
  margin: var(--spacing-sm) 0 var(--spacing-2xs);
}

.comments {
  @extend %grid;

  grid-column: 1 / -1;
  margin: var(--spacing-lg) 0 0;
  padding: 0 0 var(--spacing-lg);
  background: var(--color-bg-secondary);
  border-top: fun.convert-px(3) solid var(--color-border-light);

  &__section {
    grid-column: 2;

    &:first-child {
      margin: var(--spacing-md) 0 0;
    }
  }

  &__title {
    width: fit-content;
    margin-bottom: var(--spacing-md);
    margin-inline: auto;
  }

  &__no-comments {
    text-align: center;
  }

  &__form {
    max-width: 40ch;
    margin: auto;
  }
}

.notice {
  margin-top: var(--spacing-sm);
}