/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Book module styling.
 */

.book-navigation {
  font-size: var(--font-size-s);
  letter-spacing: 0.05em;
  color: var(--color-text-primary-medium);
  margin-block: var(--sp3);
}

.book-navigation svg {
  height: var(--sp1-25);
  width: var(--sp1-25);
  margin-inline-end: var(--sp0-5);
  flex-shrink: 0;
}

.book-navigation a {
  text-decoration: none;
  color: currentColor; 
}

.book-navigation .book-navigation__menu {
  display: flex;
  flex-direction: column;
  flex: 0 auto;
  gap: var(--sp);
  margin-block-end: var(--sp3);
  padding-inline: var(--sp4);
}

@media (max-width: 43.75rem) {
  .book-navigation .book-navigation__menu {
    padding-inline: var(--sp);
  }
}

.book-navigation .book-navigation__item {
  display: flex;
  align-items: center;
}

.book-navigation .book-navigation__item a {
  position: relative;
}

.book-navigation .book-navigation__item a::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 0;
  content: "";
  transition: transform 0.2s;
  transform: scaleX(0);
  transform-origin: left;
  border-top: solid 3px var(--color--primary-50);
}

.book-navigation .book-navigation__item a:hover:after {
  transform: scaleX(1);
}

.book-pager {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-block-start: solid 5px var(--color--gray-90);
  padding-block-start: var(--sp);
}

.book-pager a {
  color: var(--color--primary-50);
  line-height: var(--line-height-s);
}

.book-pager a:hover {
  color: var(--color--primary-30);
}

.book-pager__item {
  display: inline-block;
}

@media (min-width: 31.25rem) {
  .book-pager__item {
    flex: 0 0 33.33%;
  }
}

@media (min-width: 31.25rem) {
  .book-pager__item--center {
    text-align: center;
  }
}

@media (min-width: 31.25rem) {
  .book-pager__item--next {
    margin-inline-start: auto;
    text-align: end;
  }
}

.book-pager__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--font-size-l);
}

.book-pager__link--previous::before {
  display: block;
  width: var(--sp0-5);
  height: var(--sp0-5);
  margin-inline-end: 0.5em;
  content: "";
  transform: rotate(-45deg);
  border-block-start: solid 0.1875rem currentColor;
  border-inline-start: solid 0.1875rem currentColor;
}

.book-pager__link--next::after {
  display: block;
  width: var(--sp0-5);
  height: var(--sp0-5);
  margin-inline-start: 0.25em;
  content: "";
  transform: rotate(135deg);
  border-block-start: solid 0.1875rem currentColor;
  border-inline-start: solid 0.1875rem currentColor;
}

.book-pager__link--previous:hover:before {
   margin-right: var(--sp1);
   transition: margin-right 0.5s ease-in-out;
}

.book-pager__link--next:hover:after {
   margin-left: var(--sp1);
   transition: margin-left 0.5s ease-in-out;
  
}

[dir="rtl"] .book-pager__link--previous::before {
  transform: rotate(45deg);
}

[dir="rtl"] .book-pager__link--next::after {
  transform: rotate(-135deg);
}

@media (max-width: 31.25rem) {
  .book-pager {
    flex-direction: column;
    gap: var(--sp1-5);
    align-items: center;
    padding-inline: var(--sp);
  }
   .book-pager__item--next {
    margin-inline-start: 0
  }
   .book-pager__item--center {
    text-align: left;
  }
  .book-pager__item--next {
    margin-inline-start: 0;
  }
}

/*BLOCK BOOK NAVIGATION*/
.block-book-navigation .icon {
  display: none;
}

.block-book-navigation .block__content ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp)
}

.block-book-navigation ul:not(.menu--level-1) {
  padding-block-start: var(--sp);
}