/*
 * Buttons and the slide-in fill on hover.
 *
 * 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.
 */

.button {
  border:1px solid #fff6;
  height:48px;
  width:calc(var(--grid-column-width)*1.75 + var(--grid-gap)*.75);
}

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

  .button {
    height:32px;
  }
}

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

  .button {
    height:40px;
    width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
  }
}

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

  .button {
    width:calc(var(--grid-column-width)*10 + var(--grid-gap)*9);
  }
}

.button--white {
  background-color:#fff;
  border:1px solid #181818;
  color:#181818;
  height:48px;
  width:calc(var(--grid-column-width)*1.75 + var(--grid-gap)*.75);
}

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

  .button--white {
    height:32px;
  }
}

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

  .button--white {
    height:40px;
    width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
  }
}

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

  .button--white {
    width:calc(var(--grid-column-width)*10 + var(--grid-gap)*9);
  }
}

.button--white .button-slide {
  background-color:#fff;
  color:#181818;
}

.button--white .button-slide:after {
  background-color:#181818;
}

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

  .button--white .button-slide:not(:disabled):hover {
    color:#fff;
  }
}

.button-slide {
  background-color:#181818;
  color:#fff;
  overflow:hidden;
  position:relative;
  transition:color .6s cubic-bezier(.25,.25,0,1);
}

.button-slide:after {
  background-color:#fff;
  content:"";
  inset:0;
  position:absolute;
  transform:translateY(100%);
  transition:transform .6s cubic-bezier(.25,.25,0,1);
  z-index:1;
}

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

  .button-slide:not(:disabled):hover {
    color:#181818;
  }

  .button-slide:not(:disabled):hover:after {
    transform:translateY(0);
  }
}

.button-slide .button-text {
  position:relative;
  z-index:2;
}

.slide-button {
  display:block;
  overflow:hidden;
  position:relative;
}

.slide-button .slide-btn__hover-elem,
.slide-button .slide-btn__inner {
  align-items:center;
  background-color:inherit;
  display:flex;
  height:100%;
  transition:transform .3s ease;
  width:100%;
  z-index:1;
}

.slide-button .slide-btn__hover-elem {
  align-items:center;
  display:flex;
  inset:0;
  position:absolute;
  transform:translateY(100%);
  z-index:2;
}

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

  .slide-button:not(:disabled):hover .slide-btn__hover-elem,
  .slide-button:not(:disabled):hover .slide-btn__inner {
    transform:translateY(-100%);
  }

  .slide-button:not(:disabled):hover .slide-btn__hover-elem {
    transform:translateY(0);
  }
}