// @import 'primeflex/primeflex.scss';

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

#__layout{
  min-height: 100vh;

  & > div{
    // height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }
}

p{
  margin: 0px;
}

a{
  text-decoration: none;
  color: inherit;
}

$buttonPadding: 5rem 10rem !important;

$primary-text: white;

$primary-color: #262c35;
// $primary-color: #1F262F;
// $primary-color: #E0D9D0;

$main-blue: #76ADF1;

// $secondary-color: #D4CDC2;
$secondary-color: #2B323D;

// $tertiary-color: #C0B4A4;
$tertiary-color: #3f4b5b99;

$tertiary-color-hover: #3f4b5b;
// $tertiary-color-hover: rgba(63, 75, 91, 1);

$main-border-radius: 8px;
$secondary-border-radius: 6px;

$border-main: 1px solid $tertiary-color;
$border-main-hover: 1px solid $tertiary-color-hover ;

$outline-white: 1px solid white;

$main-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
$secondary-shadow: 0px 3px 5px 0px #0000001A !important;
$secondary-shadow-hover: 0px 12px 20px -10px rgba(0, 0, 0, 0.5) !important;

$font-family-sans: 'IBM Plex Sans', sans-serif;
$font-family-serif: 'IBM Plex Serif', serif;

$max-width-main: 1320px;


:root{
  --primary-color: #20262E !important;
}

body{
  @apply bg-gray-900;
  // @apply bg-zinc-800;
  // background: $primary-color;
  margin: 0px;
  font-family: 'IBM Plex Serif', serif !important;
  color: white;
}

button{
  border: none;
  color: inherit;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

img{
  transition: 0.3s;
}

svg{
  color: inherit;
  // color: white;
  // & * {
  //   stroke: red;
  // }
}

.mobile-only{
  display: none !important;
}

.desktop-only{
  display: inherit !important;
}

.icon-image{
  // color: inherit;
}

.input-label{
  display: flex;
  gap: 10px;
  flex-direction: column;

  label{
    font-size: 12px;
    opacity: 0.6;
  }
}

.max-height-input{
  // max-height: 43px;
}

.searchByAlgolia{
  @apply pr-2 opacity-55;
  // right: 18px;
  // opacity: 0.4;
  // transition: 0.2s;
  // height: 16px;

  &:hover{
    opacity: 1;
  }
}

.movedBySearch{
  right: 45px !important;
}

.serif{
  font-family: 'IBM Plex Serif', serif !important;
}

.sans{
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.contents{
  display: contents;
}

.page-wrapper{
  // max-width: 1320px;
  // max-width: 1500px;
  max-width: 2100px;
  width: 95%;
  margin: auto;
}

.page-wrapper-large{
  max-width: 1600px;
  width: 100%;
  margin: auto;
}

.nav-bar{
  @extend .page-wrapper-large;
  padding: 28px 22px;
}

.nav-bar-links-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.top-nav-bar{
  @extend .nav-bar;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  margin: auto;

  .justify-end{
    justify-self: self-end;
  }

  .justify-start{
    justify-self: self-start;
  }
}

.top-nav-bar-container{
}

.nav-bar-page-links{
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.hover-button{
  transition: 0.2s;
  border: 1px solid transparent;

  &:hover{
    cursor: pointer;
    background: #2B323D;
    border-radius: 4px;
    border: 1px solid #454f5d;
    transform: translateY(-1px);
  }
}

.nav-bar-footer{
  @extend .nav-bar;

  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 62px;
  padding-bottom: 42px;
  margin: 0px;
  max-width: none !important;
  // position: absolute;
  // bottom: 0px;

  a{
    text-decoration: none;
    color: #93C5FD;

    &:hover{
      text-decoration: underline;
    }
  }
}

.icon-brew-logo-wrapper{
  display: flex;
  flex-direction: row;

  text-decoration: none !important;
}

.icon-brew-logo-text{
  font-size: 1.15rem;
  font-weight: 700;
  color: white;
  margin: 0px
}

// .icon-brew-logo-wrapper-horizontal-sm{
  .icon-brew-logo-wrapper-horizontal{
  @extend .icon-brew-logo-wrapper;

  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.icon-brew-logo-wrapper-vertical{
// .icon-brew-logo-wrapper-vertical-xl{
  @extend .icon-brew-logo-wrapper;

  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 12px;

  .icon-brew-logo-text{
    font-size: 2.25rem;
  }
}

.nuxt-link{
  color: white;
  text-decoration: none;
  transition: 0.2s;
  font-size: 1rem;
  // font-size: 1.15rem;

  &:hover{
    text-decoration: underline;
  }

}

.main-layout-wrapper{
  @apply grid;

  grid-template-columns: 280px auto;
  gap: 18px;
  transition: 0.3s;
}


.main-layout-wrapper-extended{
  grid-template-columns: 212px auto 242px !important;
}


.main-content-wrapper{
  @apply shadow-none !shadow-none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 0px 18px 0px;
  height: fit-content;
  // height: 100%;
}

.content-card{
  border-radius: $main-border-radius;
  box-shadow: $main-shadow;
  width: 100%;
  transition: 0.2s;
}

.content-card-primary{
  @extend .content-card;
  @apply
    border border-transparent
    shadow-none
  ;

  // border: $border-main;
  // box-shadow: $secondary-shadow;

  &:hover{
    @apply  border-gray-700 !bg-gray-900;
    // background: $primary-color;
    box-shadow: $secondary-shadow-hover;
    // border: $border-main-hover;
    cursor: pointer;
    transform: translateY(-1px) scale(1.07);
  }
}

.content-card-secondary{
  @apply max-h-[83vh] overflow-auto;

  @extend .content-card;
  // min-height: 123px;
  position: relative;
  // background: $secondary-color;

}

.skeleton-wide{
  .p-skeleton{
    width: calc(100% - 46px) !important;
    height: calc(100% - 46px) !important;
    position: absolute !important;
  }
}

.content-area{
  @apply
    flex flex-row flex-wrap justify-around h-fit
  ;
  // display: grid;
  // grid-template-columns: repeat(9, 1fr);

  gap: 12px;
  width: 100%;
  // min-height: 140px;
  padding: 18px;
  z-index: 0;

  svg{
    transition: 0s !important;
  }
}

.icon-card-wrapper{
  @extend .content-card-primary;
  @apply
    flex py-4 px-2 max-w-32 w-full
    hover:!bg-gray-800/70
    hover:scale-110
  ;

  aspect-ratio: 1/1;

  &:hover{
    p{
      @apply opacity-100;
    }
  }

  p{
    @apply
      font-light
      w-full
      whitespace-normal
      line-clamp-1 truncate
      transition
    ;
    font-size: 12px;
    font-weight: 400;
    margin: 0px;
    opacity: 0.7;
    text-transform: capitalize;
  }
}

.icon-card-container{
  @apply
    text-center
    grid
    grid-rows-2
    items-center
    gap-1
    w-full
  ;
    // p-[22px_16px_16px_16px]

  > :first-child {
    @apply
      w-full
      flex
      justify-center
      items-center;
  }
}

.p-toast{
  opacity: 1 !important;

  .p-toast-summary{
    font-family: $font-family-serif;
    color: $primary-text;
  }

  .p-toast-icon-close{
    color: $primary-text !important;
  }

  .p-toast-message-icon{
    color: $primary-text !important;
  }
}

.icon-download-toast{
  .p-toast-detail{
    display: none !important;
  }

  .p-toast-message-content{
    align-items: center;
    justify-content: space-between;
  }

  .p-toast-message{
    border: $border-main !important;
    box-shadow: $main-shadow !important;
    background: $secondary-color !important;
    // background: $primary-color !important;
  }
}

.custom-toast {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-family: $font-family-serif;
  color: $primary-text;
}

.break-word{
  word-break: break-word;
}

.page-enter-active,
.page-leave-active{
    transition: .15s;
}

.page-enter{
    opacity: 0;
    transform: translateY(10px);
}

.page-leave-active{
    opacity: 0;
    transform: translateY(-10px);
}

.no-icons-msg{
  width: 100%;
  text-align: center;
  margin: auto;
  // padding-top: 2rem;
}

.clear-search-btn{
  opacity: 0.5;
  cursor: pointer;
  transform: translateY(-50%);
  right: 0.75rem;
  margin: 0px !important;
  position: absolute;
  top: 50%;

  &:hover{
    opacity: 1;
  }
}

.icon-image-18{
  width: 18px;
  height: 18px;
}

.icon-image-24{
  width: 24px;
  height: 24px;
}

.icon-image-28{
  width: 28px;
  height: 28px;
}

.hero-logo{
  width: 28px;
}

.sticky-shadow{
  box-shadow: -1px 10px 16px -3px #191e24ab;
}

.top-card-action-wrapper-right{
  display: flex;
  width: 100%;
  flex-direction: row;
}

.search-bar-container{
  @apply pb-1 md:!pb-4;
}

.search-bar-wrapper{
  @apply
    h-fit
    flex flex-row justify-center items-center gap-6
    pt-2 pb-2
  ;
  width: 95%;
  margin: auto;
  max-width: $max-width-main;

  .p-dropdown{
    min-width: 100px;
  }
}

.options-wrapper{
  @apply flex gap-2 md:gap-3 h-fit items-end;

  @media (max-width: 768px) {
    @apply pt-3;

    max-width: 100vw;
    overflow: auto;
    justify-content: flex-start;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.color-picker{
  @apply
    rounded-lg
    w-10 h-10
    cursor-pointer
    !p-0
    bg-gray-900
    border border-gray-700 hover:border-gray-600
    transition-colors
  ;

  &::-webkit-color-swatch-wrapper {
    @apply m-0 p-0.5 h-full w-full border-none;
  }

  &::-webkit-color-swatch {
    @apply m-0 rounded-md border-none;
  }

  &::-moz-color-swatch {
    @apply m-0 rounded-sm border-none;
  }
}

.p-colorpicker-preview{
  height: 43px !important;
  width: 43px !important;
}

.weight-input-wrapper{
  // display: grid;
  width: 80px
}

.input-search{
  @apply relative flex flex-row w-full max-w-xl gap-4 items-center;
  // @include styleclass('w-11');

  // height: 43px;
  // max-width: 620px;
}

.switch-with-title-horizontal{
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;

  @extend .sans;
}

.hero-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0px 48px;
  max-width: 540px;
  text-align: center;
  gap: 18px;
  min-height: 399px;

  img{
    width: 89px;
    height: 89px;
  }
}

.hero-btns-wrapper{
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  // padding-top: 28px;
}


//// text utils
.text-4_5xl{
  font-size: 2.25rem;
}

.vertical-hr{
  width: 1px;
  height: 1rem;
  margin: 0px 8px;
}

.sticky-side-bar{
  position: sticky;
  top: 170px;
  border-radius: 8px;
  height: fit-content;
  overflow: hidden;
}

.category-side-bar-wrapper-container{
  @apply
    // max-h-[83vh]
    bg-gray-800/50
    border border-gray-700/50
  ;
  @extend .content-card-secondary;

  display: flex;
  flex-direction: column;
  gap: 4px;
  // height: fit-content;
  width: 100%;
  // min-height: 600px;
  padding: 12px;
  z-index: 2;
  overflow-y: auto;
}

.category-side-bar-wrapper{
  display: flex;
  flex-direction: column;
  gap: 4px;

  height: fit-content;
  width: 100%;
}

.side-bar-title{
  // @include styleclass('text-base font-semibold pb-3');
}

.category-item-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  white-space: nowrap;
  padding: 8px 14px;
  height: fit-content;
  transition: 0.2s;
  border-radius: 8px;
  cursor: pointer;

  // &:hover{
  //   background: $tertiary-color;
  // }

  // &:focus{
  //   outline: $outline-white;
  //   background: $tertiary-color;
  // }
}

.category-item-title{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.category-item-number{
  font-weight: 400;
  opacity: 0.7;
}

.icon-brew-icon{
  display: inline-flex;
  height: fit-content;
}

.p-button{
  border-radius: 24px !important;
}

// .p-button-small{
//   padding: 0.5rem 1rem !important;
// }

.border-image{
  border: 1px solid #3F4B5B;
  border-radius: 8px;
  box-shadow: 0px 22px 30px -10px rgba(0, 0, 0, 0.4);
}

.article-img{
  position: relative;
  width: 120%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 24px;
  @extend .border-image;
}

.ib-heart{
  background: red;
  height: 100px;
  width: 100px;
}


.md-article-body{
  max-width: 620px;
  width: 80%;
  margin: auto;
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 160%;
  font-weight: 400;

  .article-body-img{
    margin-bottom: 48px;

    @extend .article-img;
  }

  p{
    margin-bottom: 28px;
  }

  a{
    color: $main-blue;
    text-decoration: underline;
  }

}

.p-dialog{
  max-width: 680px !important;
  width: 65%;

  @media screen and (max-width: 680px){
    width: 95% !important;
  }


  img{
    width: 100%;
    border-radius: $main-border-radius;
    box-shadow: $main-shadow;
    border: $border-main;
    margin: 16px 0px;
  }
}

.dialog-content{
  width: 100%;
  padding-top: 16px;

  h2{
    margin: 24px 0px 16px 0px;
  }

  h3{
    margin: 12px 0px;
  }

  h4{
    padding-left: 8px;
    font-size: 1.2rem;
  }

  ul{
    width: 90%;
    margin-bottom: 24px;
    margin-top: 12px;
  }

  li{
    margin: 0px 0px 6px 0px;
    line-height: 140%;
  }

  hr{
    margin: 8px 0px 24px 0px;
  }
}

.upload-wrapper{
  width: fit-content;
  margin: auto;
  padding: 24px;
}

.height-weight-18{
  height: 18px;
  width: 18px;
}

.dropdown-option{
  display: flex;
  align-items: center;
  gap: 12px;
}

.min-100vh{
  height: calc(100vh - 215px);
}

.changes-wrapper{
  max-width: 720px;
  margin: auto;
}

// .suggestions-dialog{
//   .p-dialog {
//     margin: auto;
//     max-width: 720px;
//   }
// }

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

  .desktop-only{
    display: none !important;
  }

  .mobile-only{
    display: inherit !important;
  }

  .main-layout-wrapper{
    // padding-top: 8px;
    // padding-top: 12px;
    grid-template-columns: 1fr;
  }

  // .searchByAlgolia{
  //   display: none;
  // }

  .nav-bar-links-wrapper {
    gap: 5px;
  }

  .page-wrapper{
    width: 87%;
  }

  .input-search{
    width: 100% !important;
  }

  .search-bar-wrapper{
    width: 87%;
    margin: auto;
    flex-direction: column;
    gap: 0px;
  }


  .p-dropdown .p-dropdown-trigger{
    padding: 0px 1.3rem 0px 0.7rem !important;
  }

  .p-dropdown-panel .p-dropdown-items{
    padding: 0.5rem 0 !important;
  }

  .p-dropdown .p-dropdown-panel{
    overflow: hidden;
  }

  .sticky-side-bar{
    max-width: 87vw;
  }

  .category-side-bar-wrapper-container{
    flex-direction: row;
    overflow-x: scroll;
    top: 0px;
    // top: 145px;
    margin: auto;
    width: 100%;
    min-height: 10px;
    // width: 95%;
  }
  .category-side-bar-wrapper{
    flex-direction: row;
  }

  .top-nav-bar{
    grid-gap: 4px;
    display: flex;
    gap: 18px;
    padding-top: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .nav-bar-page-links{
      display: flex;
      gap: 0px;
      flex-direction: row;
      width: 100%;
      flex-wrap: nowrap;
      justify-content: space-between;

      .nuxt-link{
        font-size: 0.92rem;
      }
    }
  }

  .min-100vh{
    min-height: calc(100vh - 245px) !important;
  }

  .hero-wrapper{
    min-height: 330px;
    padding-top: 30px;
    padding-bottom: 30px;

    img{
      width: 74px;
      height: 74px;
    }

    .icon-brew-logo-wrapper-vertical .icon-brew-logo-text {
      font-size: 2.2rem;
    }

    .text-2xl{
      font-size: 1.2rem !important;
      margin-bottom: 1rem;
    }
  }

}
