@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

a.cs-tab:not(.cs-active) {
  @apply px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-600;
  &:hover {
    @apply text-gray-800;
  }
  &:focus {
    @apply outline-none text-gray-800 bg-gray-200;
  }
}

a.cs-tab.cs-active {
  @apply px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-800 bg-gray-200;
  &:focus {
    @apply outline-none bg-gray-300;
  }
}

.markdown-body li {
  list-style: initial;
}

.markdown-body img {
  max-width: 90% !important;
  display: initial;
  padding-left: 2%;
  padding-right: 2%;
  @apply py-1.5;
}

.cs-index-main {
  @apply flex-1 relative z-0 overflow-y-auto py-6;
  &:focus {
    @apply outline-none;
  }
}

.autocomplete-suggestions {
  position: fixed;
}

.cs-sidebar-nav__desktop .cs-sidebar-tab {
  @apply text-sm leading-5;
}


.cs-sidebar-nav__mobile .cs-sidebar-tab {
  @apply text-base leading-6;
}

.cs-sidebar-tab {
  @apply mt-1 flex items-center px-2 py-2 font-medium rounded-md transition ease-in-out duration-150;
  &:focus {
    @apply outline-none;
  }
}

.cs-sidebar-tab.active {
  @apply text-gray-900 bg-gray-100;
  &:hover {
    @apply text-gray-900 bg-gray-100;
  }
  &:focus {
    @apply bg-gray-200;
  }
}

.cs-sidebar-tab:not(.active) {
  @apply text-gray-600;
  &:hover {
    @apply text-gray-900 bg-gray-50;
  }
  &:focus {
    @apply text-gray-900 bg-gray-100;
  }
}

#cs-settings-dropdown svg path, .cs-sidebar svg path, .cs-modal svg path  {
  fill: inherit;
}

.cs-modal {
  z-index: 10;
}

.cs-category-tab {
  @apply font-medium text-sm leading-5 w-1/2 pt-1.5 pb-4 px-1 text-center border-b-2;
}

.cs-category-tab.active {
  @apply border-indigo-500 text-indigo-600;
  &:focus {
    @apply outline-none text-indigo-800 border-indigo-700;
  }
}

.cs-category-tab:not(.active) {
  @apply border-transparent text-gray-500;
  &:hover {
    @apply text-gray-700 border-gray-300;
  }
  &:focus {
    @apply outline-none text-gray-700 border-gray-300;
  }
}

.cs-hide-deep .cs-deep {
  @apply hidden;
}

.js-dependencies:not(.cs-hide-deep) ul li:not(:first-child) {
  @apply border-t border-gray-200;
}

.js-dependencies.cs-hide-deep ul li:not(.cs-no-border) {
  @apply border-t border-gray-200;
}

.month-picker {
  @apply mt-0.5;
}

.month-picker-next .ui-icon, .month-picker-previous .ui-icon {
  @apply my-1 ml-1.5 mr-1;
}

.month-picker-next .ui-button, .month-picker-previous .ui-button {
  @apply transition duration-150 ease-in-out;
}

.month-picker-next .ui-button:not(.ui-state-disabled):hover, .month-picker-previous .ui-button:not(.ui-state-disabled):hover {
  @apply bg-gray-50;
}

.month-picker-next .ui-button:not(.ui-state-disabled):focus, .month-picker-previous .ui-button:not(.ui-state-disabled):focus {
  @apply outline-none bg-gray-50;
}

.month-picker .ui-button.ui-state-disabled {
  pointer-events: none;
}

.tippy-box {
  @apply bg-gray-600;
}

.tippy-box[data-placement^='left'] > .tippy-arrow::before {
  // @apply border-l-gray-600;
  border-left-color: #4b5563;
}

.cs-pagination-button {
  @apply -ml-px relative items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 transition ease-in-out duration-150;
}

.cs-pagination-button:hover {
  @apply text-gray-500;
}

.cs-pagination-button:focus {
  @apply z-10 outline-none border-blue-300 shadow-outline-blue;
}

.cs-pagination-button:active, .cs-pagination-button.active {
  @apply bg-gray-100 text-gray-700;
}

.autocomplete-suggestions {
  z-index: 100;
}

.cs-category-autocomplete {
  overflow-y: scroll;
}
