@tailwind base;

/* General */

.bg-cover {
  background-size: cover !important;
}

.bg-cover {
  background-size: cover !important;
}

.bg-center {
  background-position: center !important;
}

#loader {
  @apply w-screen h-screen fixed top-0 left-0 bg-gray-100 z-40 flex justify-center items-center;
}

.wrapper {
  @apply max-w-screen-xl mx-auto px-4;
  @apply md:px-8;
}

/* Texts */

.title {
  @apply font-semibold text-xl md:text-3xl text-secondary;
  @apply leading-relaxed !important;
}

.subtitle {
  @apply text-sm uppercase text-primary;
  @apply leading-loose !important;
}

.paragraph {
  @apply text-gray-800 leading-relaxed;
}

/* Inputs */
.input {
  @apply mt-2 w-full outline-none p-2 text-sm border border-gray-400 rounded-sm bg-transparent;
}

.input:focus {
  @apply border-primary;
}

.input-label {
  @apply text-sm text-gray-400 block;
}

.input-label--error {
  @apply text-xs text-red-600 block;
}

/* Buttons */

.btn {
  @apply focus:outline-none border border-gray-200 bg-gray-200 p-4 py-2 transition-all duration-500 rounded-sm;
}

.btn:hover {
  @apply bg-gray-300 border-gray-300 cursor-pointer;
}

.btn.btn--white-opacity {
  @apply bg-white border-none text-gray-200 bg-opacity-20;
}

.btn.btn--white-opacity:hover {
  @apply bg-opacity-25;
}

/* Primary button */

.btn.btn--primary {
  @apply bg-primary border text-gray-100 border-primary;
}

.btn.btn--primary:hover {
  @apply bg-transparent text-primary;
}

.btn--primary.btn--outline {
  @apply bg-transparent border border-primary text-primary;
}

.btn--primary.btn--outline:hover {
  @apply bg-primary text-gray-100;
}

/* Secondary button */

.btn.btn--secondary {
  @apply bg-secondary text-gray-100 border-secondary;
}

.btn.btn--secondary:hover {
  @apply bg-transparent text-secondary;
}

.btn--secondary.btn--outline {
  @apply bg-transparent border border-secondary text-secondary;
}

.btn--secondary.btn--outline:hover {
  @apply bg-secondary text-gray-100;
}

.btn.btn--whatsapp {
  background-color: #55CD6C;
  @apply flex items-center justify-center text-gray-100;
}

.btn .btn__image {
  @apply w-5;
}

.btn.btn--whatsapp .btn__image.btn__image--white {
  filter: invert(100%) sepia(4%) saturate(17%) hue-rotate(145deg) brightness(106%) contrast(104%);
}

/* Feather icons */

.feather {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  @apply w-6 h-6 flex-shrink-0;
}

.feather-xs {
  @apply w-2 h-2;
}

.feather-sm {
  @apply w-3 h-3;
}

.feather-base {
  @apply w-4 h-4;
}

.feather-lg {
  @apply w-5 h-5;
}

.feather-xl {
  @apply w-6 h-6;
}

.feather-2xl {
  @apply w-7 h-7;
}

.feather-3xl {
  @apply w-8 h-8;
}

.feather-4xl {
  @apply w-9 h-9;
}

/* Header */

#burger > :first-child, #burger > :last-child {
  height: 1px;
  @apply transition-all w-7 my-2 duration-500 bg-gray-800;
}

#burger.active > :first-child {
  transform: rotate(-45deg) translateX(-1px);
  @apply m-0;
}

#burger.active > :last-child {
  transform: rotate(45deg);
  @apply m-0;
}

#burger.active ~ #nav {
  @apply transform translate-x-0 left-0;
}

#nav > ul > li::after {
  content: '';
  height: 2px;
  @apply absolute bottom-0 bg-primary left-0 w-0 transition-all duration-500;
}

#nav > ul > li.active::after, #nav > ul > li:not(.button-item):hover::after {
  @apply w-full;
}

#nav > ul > li.active a {
  @apply text-primary;
}

header {
  @apply bg-gray-100 py-6 shadow-md fixed top-0 left-0 z-10 w-screen transition-all duration-500;
  @apply md:py-0;
}

header > div {
  @apply max-w-screen-xl mx-auto flex items-center justify-between px-4;
  @apply xl:px-0;
}

header #burger {
  @apply lg:hidden;
}

header #nav {
  transform: translateX(100%);
  background-color: rgba(0, 0, 0, 0.94);
  @apply bg-gray-100 absolute flex flex-col items-center justify-between w-screen h-screen py-16 transition-all duration-500;
  @apply lg:relative lg:w-auto lg:py-0;
  @apply lg:h-auto lg:bg-transparent lg:transform lg:translate-x-0;
}

header #nav > ul {
  @apply flex flex-col items-center justify-between w-full h-full;
  @apply lg:flex-row lg:justify-end;
}

header #nav > ul > li:not(.button-item) {
  @apply mx-4 relative;
  @apply md:py-10;
}

header #nav > ul > li:not(.button-item) > a {
  @apply text-gray-800 text-xs transition-all duration-500 uppercase py-4;
}

header #logo-wrapper img {
  @apply w-36;
  @apply md:w-48;
}

/* Pagination */

.pagination {
  @apply flex flex-wrap justify-center items-center;
}

.pagination__item {
  @apply  text-primary rounded-sm transition-all duration-300 m-2 border border-gray-200 w-12 h-12 flex items-center justify-center;
  @apply hover:bg-primary hover:text-gray-200 hover:border-primary;
}

.pagination__item.pagination__item--active {
  @apply bg-primary text-gray-200 border-primary;
}

.swiper-button-disabled, .swiper-button-disabled > svg {
  @apply bg-opacity-40 border-opacity-40 text-opacity-40 !important;
}

@tailwind components;
@tailwind utilities;