/*
 * The pagination component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.pagination {
  border:1px solid #ccc;
  display:flex;
  height:48px;
  margin-top:64px;
  margin-inline:auto;
  padding:0;
  width:-webkit-max-content;
  width:max-content;
}

@media screen and (max-width:1440px) {

  .pagination {
    height:32px;
    margin-top:40px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .pagination {
    margin-top:32px;
  }
}

.pagination__button {
  align-items:center;
  cursor:pointer;
  display:flex;
  height:100%;
  justify-content:center;
  transition:color .3s ease-in-out,background-color .3s ease-in-out;
  width:70px;
}

.pagination__button:not(:last-child) {
  border-right:1px solid #ccc;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .pagination__button:not(.pagination__button--dots):not(:disabled):hover {
    background-color:#181818;
    color:#fff;
  }
}

@media screen and (max-width:1440px) {

  .pagination__button {
    width:48px;
  }
}

.pagination__button.active {
  background-color:#181818;
  color:#fff;
}

.pagination__link {
  align-items:center;
  display:block;
  display:flex;
  height:100%;
  justify-content:center;
  width:100%;
}

.form-message-popup {
  background-color:#f1ede4;
  border:1px solid #181818;
  -webkit-clip-path:inset(0 0 100% 0);
  clip-path:inset(0 0 100% 0);
  color:#181818;
  gap:94px;
  padding:18px 24px 24px;
  pointer-events:none;
  position:fixed;
  right:var(--offset-x);
  top:var(--header-height,64px);
  transition:-webkit-clip-path .6s cubic-bezier(.25,.25,0,1);
  transition:clip-path .6s cubic-bezier(.25,.25,0,1);
  transition:clip-path .6s cubic-bezier(.25,.25,0,1),-webkit-clip-path .6s cubic-bezier(.25,.25,0,1);
  width:calc(var(--grid-column-width)*5.75 + var(--grid-gap)*4.75);
  z-index:100;
}

.form-message-popup.is-active {
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  pointer-events:auto;
}

@media screen and (max-width:1440px) {

  .form-message-popup {
    gap:60px;
    padding:12px 16px 16px;
    width:calc(var(--grid-column-width)*6.25 + var(--grid-gap)*5.25);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .form-message-popup {
    gap:18px;
    padding:8px 12px 12px;
    width:calc(var(--grid-column-width)*18 + var(--grid-gap)*17);
  }
}