// RESET
%reset {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

// UI
%cta {
  cursor: pointer;
  height: var(--tide-booking-cta-height);
  width: var(--tide-booking-cta-width);
  padding: var(--tide-booking-cta-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  outline: none;
  border-radius: var(--tide-booking-cta-border-radius);
  border: var(--tide-booking-cta-border);
  line-height: 1.2;
  font-family: var(--tide-booking-cta-font-family-secondary);
  font-size: var(--tide-booking-cta-font-size);
  font-weight: var(--tide-booking-cta-font-weight);
  text-decoration: var(--tide-booking-cta-text-decoration);
  color: var(--tide-booking-cta-color);
  background: var(--tide-booking-cta-background);
  box-sizing: border-box;
  transition: all 0.3s ease;

  @include media-xs {
    width: var(--tide-booking-cta-width-xs);
    height: var(--tide-booking-cta-height-xs);
    font-size: var(--tide-booking-cta-font-size-xs);
  }

  .icon {
    width: var(--tide-booking-cta-icon-size);
    height: var(--tide-booking-cta-icon-size);
  }

  &:hover {
    background: var(--tide-booking-cta-background-hover);
    text-decoration: var(--tide-booking-cta-text-decoration-hover);
    color: var(--tide-booking-cta-color-hover);
    fill: var(--tide-booking-cta-icon-color-hover);
    border: var(--tide-booking-cta-border-hover);
  }

  &:focus,
  &:active {
    text-decoration: var(--tide-booking-cta-text-decoration-focus);
    background: var(--tide-booking-cta-background-focus);
    color: var(--tide-booking-cta-color-focus);
    fill: var(--tide-booking-cta-icon-color-focus);
    border: var(--tide-booking-cta-border-focus);
  }

  span {
    display: flex;
    align-items: center;
    gap: 5px;
  }
}

%cta--secondary {
  cursor: pointer;
  height: var(--tide-booking-cta-height-secondary);
  width: var(--tide-booking-cta-width-secondary);
  padding: var(--tide-booking-cta-padding-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  outline: none;
  border-radius: var(--tide-booking-cta-border-radius-secondary);
  border: var(--tide-booking-cta-border-secondary);
  line-height: 1.2;
  font-family: var(--tide-booking-cta-font-family-secondary);
  font-size: var(--tide-booking-cta-font-size-secondary);
  font-weight: var(--tide-booking-cta-font-weight-secondary);
  text-decoration: var(--tide-booking-cta-text-decoration-secondary);
  color: var(--tide-booking-cta-color-secondary);
  background: var(--tide-booking-cta-background-secondary);
  box-sizing: border-box;
  transition: all 0.3s ease;

  @include media-xs {
    height: var(--tide-booking-cta-height-xs-secondary);
    font-size: var(--tide-booking-cta-font-size-xs-secondary);
  }

  .icon {
    width: var(--tide-booking-cta-icon-size-secondary);
    height: var(--tide-booking-cta-icon-size-secondary);
    fill: var(--tide-booking-cta-icon-color-secondary);
  }

  &:hover {
    background: var(--tide-booking-cta-background-secondary-hover);
    color: var(--tide-booking-cta-color-secondary-hover);
    fill: var(--tide-booking-cta-icon-color-secondary-hover);
    border: var(--tide-booking-cta-border-secondary-hover);
    text-decoration: var(--tide-booking-cta-text-decoration-secondary-hover);
  }

  &:focus,
  &:active {
    text-decoration: none;
    background: var(--tide-booking-cta-background-secondary-focus);
    color: var(--tide-booking-cta-color-secondary-focus);
    fill: var(--tide-booking-cta-icon-color-secondary-focus);
    border: var(--tide-booking-cta-border-secondary-focus);
    text-decoration: var(--tide-booking-cta-text-decoration-secondary-hover);
  }

  span {
    display: flex;
    align-items: center;
    gap: 5px;
  }
}

%scrollbar-thin {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    padding: 2px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #cbcbcb;
  }
}

%scrollbar-transparent {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    width: 0 !important;
  }
}

%text-decoration-none {
  text-decoration: none;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }
}

// ANIMATIONS
%transition-easing {
  transition-duration: 0.2s;
  transition-property: width, height, transform, border, fill, color, background-color, box-shadow, opacity;
  transition-timing-function: ease-out;
}