/**
 * @file
 * Styles for the open to bookings banner.
 */

.block-open-to-bookings {
  background-color: var(--color-primary);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.open-to-work-banner {
  position: relative;
  width: 100%;
  padding: var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs) var(--spacing-xl);
  text-align: left;
  color: var(--color-black);
  font-size: var(--font-size-xs);
  pointer-events: none;
}

@media screen and (min-width: 30rem) {
  .open-to-work-banner {
    &.layout-area--padding-x-md {
      padding-right: var(--spacing-xl);
      padding-left: var(--spacing-xl);
    }
  }
}

@media screen and (min-width: 90em) {
  .open-to-work-banner {
    font-size: var(--font-size-sm);
  }
}

.open-to-work-banner::before {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 5px;
  height: 5px;
  content: "";
  transform: translateY(-50%);
  animation: dot-pulse 2s infinite;
  border-radius: 50%;
  background-color: var(--color-black);
}

@media screen and (min-width: 30em) {
  .open-to-work-banner::before {
    left: var(--spacing-md);
  }
}

@keyframes dot-pulse {
  0% {
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }

  25% {
    transform: translateY(-50%) scale(1.5);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }

  75% {
    transform: translateY(-50%) scale(1.5);
    opacity: 0.7;
  }

  100% {
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}

.open-to-work-banner a {
  position: relative;
  text-decoration: none;
  color: var(--color-gray-700);
  text-shadow: var(--shadow-sm);
  pointer-events: auto;

  &:hover {
    color: var(--color-black);
    text-decoration: none;
  }

  &::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
  }

  &:hover::before {
    transform: scaleX(1);
    background-color: var(--color-black);
  }
}