@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {

  * {
    @apply [scrollbar-width:_thin] [scrollbar-color:_var(--background-light-static)_#ffffff] scroll-smooth font-CustomFont;
  }

  .overflow-text-1-clamp {
    @apply overflow-hidden [-webkit-line-clamp:_1] [-webkit-box-orient:_vertical] [display:_-webkit-box];
  }

  .professional-body {
    @apply bg-background-light h-dvh overflow-y-auto overflow-x-hidden;
  }

  .professional-main {
    @apply relative top-0 z-30 h-dvh w-dvw p-2 flex flex-col-reverse lg:flex-row gap-0 text-sm;
  }

  .container-main {
    @apply z-10 w-full h-[calc(100%_-_60px)] lg:h-full flex justify-between items-start;
  }

  .sub-container-frame {
    @apply bg-white w-full h-full rounded-lg overflow-hidden;
  }

  .sub-container {
    @apply h-full;
  }

  .header-section-container {
    @apply h-20 flex justify-between items-center [border-bottom:1px_solid_var(--background-light)] bg-[#ffffff];
  }

  .header-section {
    @apply flex h-full justify-between items-center w-full px-6 py-4;
  }

  .header-subsection {
    @apply flex justify-between gap-4 items-center w-full h-20 px-6 py-4 [border-bottom:1px_solid_var(--background-light)];
  }

  .lateral-section-container {
    @apply bg-white lg:min-w-96 lg:max-w-96 max-w-full h-full p-3 border-none lg:[border-right:1px_solid_var(--background-light)] rounded-lg lg:rounded-none;
  }

  .lateral-section {
    @apply w-full h-full flex flex-col rounded-3xl overflow-clip bg-background-light-secondary;
  }

  .main-section {
    @apply w-full h-[calc(100%_-_70px)] lg:h-full mt-[70px] lg:mt-0;
  }

  .submenu-section {
    @apply w-full h-20 flex items-center justify-center bg-background-light;
  }

  .add-button {
    @apply flex items-center justify-center lg:min-w-40 gap-1 p-2 bg-black hover:bg-corporate-hover duration-300 transition-[background-color] text-white rounded-full;

    img {
      @apply w-5 h-5 invert;
    }

    span {
      @apply hidden lg:block;
    }
  }

  .icon-button {
    @apply flex items-center justify-center bg-background-light h-full w-9 duration-300 transition-[background-color] rounded-full;

    img {
      @apply w-6 h-6;
    }
  }

  .icon-button:hover {
    @apply bg-background-light-hover;
  }

  .input-text-form {
    @apply w-full relative z-10 p-2 rounded-[5px] [background:_none] outline-none ring-0 focus:ring-0 autofill:bg-transparent [border:_solid_1px_#00000040] duration-300;
  }

  .input-text-query {
    @apply w-full relative z-10 p-2 rounded-[5px] [background:_none] outline-none ring-0 focus:ring-0 autofill:bg-transparent [border:_solid_1px_#00000040] duration-300;
  }

  /* Change Autocomplete styles in Chrome*/
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    @apply [background-image:_inherit] [-webkit-text-fill-color:_black] [-webkit-box-shadow:_0_0_0px_1000px_transparent_inset] [box-shadow:_0_0_0px_1000px_transparent_inset] [transition:_background-color_5000s_ease-in-out_0s] [color:_black];
  }

  .sidemenu-section-item-button {
    @apply flex items-center justify-start gap-2 p-2 duration-300 transition-[background-color] rounded-full;
  }
  
  .sidemenu-section-item-button:hover {
    @apply bg-background-light-hover;
  }

  .hover-button {
    @apply w-16 h-32 bg-corporate-hover;
  }

  .checkbox {
    @apply duration-300 cursor-pointer !ring-transparent;
  }

  .checkbox:checked {
    @apply bg-corporate;
  }

  .checkbox:indeterminate {
    @apply !bg-corporate;
  }

  .checkbox:hover {
    @apply [border:1px_solid_var(--corporate)];
  }

  .checkbox:checked:hover {
    @apply  bg-corporate;
  }

  .checkbox:checked:focus {
    @apply bg-corporate;
  }

  .collection:hover {

    .collection-cover {
      @apply scale-110;
    }

    .collection-name {
      @apply [text-shadow:_0px_0px_6px_#ff0090,_0px_0px_6px_#ff0090,_0px_0px_6px_black,0px_0px_6px_black];
    }

    .checkbox {
      @apply opacity-100;
    }

    .more-options {
      @apply opacity-100;
    }
  }
  
  .more-options:hover {
    @apply opacity-100;
  }

  .selection-panel {
    @apply absolute z-50 bottom-2 right-0 left-0 m-auto flex items-center justify-between gap-2 w-80 h-14 bg-black text-white rounded-lg px-4 [box-shadow:0px_0px_8px_2px_#00000070] duration-300;
  }

  .highlight-picture-list {
    a {
      @apply absolute top-2 right-2 w-6 h-6 min-w-6 min-h-6 p-1 bg-white hover:bg-background-light-hover rounded-full duration-300;
    }
  }

  .highlight-picture-show {
    @apply lg:inline w-5 h-5;
    a {
      @apply inline w-5 h-5 duration-300;
    }
  }

  .corporate-button {
    @apply m-3 p-[2px] w-max h-max rounded-full [border:1px_solid_#ff0090] duration-300;

    span {
      @apply inline-block px-9 py-2 bg-[#ff0090] duration-300 text-white rounded-full;
    }
  }

  .corporate-button:hover {
    @apply [border:1px_solid_#8c2b71];

    span {
      @apply bg-[#8c2b71];
    }
  }

  .plans-button {
    @apply inline-block w-full py-2 rounded-full bg-white text-black font-semibold duration-300 cursor-pointer;
  }
  .plans-button:hover {
    @apply bg-corporate-hover text-white;
  }

  .featured-plan-button {
    @apply inline-block w-full py-2 rounded-full bg-black text-white font-semibold duration-300 cursor-pointer;
  }
  .featured-plan-button:hover {
    @apply bg-corporate-hover;
  }

}