@use "../feature/theme/theme" as theme;
@use "../feature/lookAndFeel/feel" as feel;

.bg-tile {
  @include feel.modern {
    @include theme.propertyImportant(background-color, #ffffff, #181a1b);
  }
}

.neon-navigation-menu {
  font-size: 14px !important;
  font-family: 'Inter Tight', Arial, sans-serif !important;

  ul {
    padding-left: 0 !important;
    margin-bottom: 0 !important;

    li {
      list-style: none !important;
    }
  }

  .bg-neutral2-100 {
    @include theme.propertyImportant(background-color, #ffffff, #181a1b);
  }

  .border.border-tile {
    border-width: 1px;
    border-style: solid;
    @include theme.propertyImportant(border-color, #e4e6e7, #2b2e30);
  }

  .text-green-500 {
    color: #00a538;
  }

  .bg-neutral2-050 {
    @include theme.property(background-color, #f5f7fa, #121314);
  }

  .text-neutral2-050 {
    @include theme.property(color, #f5f7fa, #121314);
  }

  .text-neutral2-400 {
    @include theme.property(color, #91969c, #5c6166);
  }

  .text-neutral2-500 {
    @include theme.property(color, #5c6066, #767d84);
  }

  .text-neutral2-600 {
    @include theme.property(color, #44474b, #91969c);
  }

  .text-neutral2-800 {
    @include theme.property(color, #181a1b, #c7c9cc);
  }

  .flex {
    display: flex !important;
  }

  .font-normal {
    font-weight: 400 !important;
  }

  .font-semibold {
    font-weight: 600 !important;
  }

  .font-medium {
    font-weight: 500 !important;
  }

  .gap-15 {
    gap: 60px !important;
  }

  .gap-x-6 {
    gap: 0 24px !important;
  }

  .inline-block {
    display: inline-block !important;
  }

  .justify-between {
    justify-content: space-between !important;
  }

  .mb-3 {
    margin-bottom: 12px !important;
  }

  .ml-1 {
    margin-left: 4px !important;
  }

  .mr-1 {
    margin-right: 4px !important;
  }

  .mr-2 {
    margin-right: 8px !important;
  }

  .mt-1 {
    margin-top: 4px !important;
  }

  .mt-6 {
    margin-top: 24px !important;
  }

  .p-4 {
    padding: 16px !important;
  }

  .px-4.py-3 {
    padding: 16px 12px !important;
  }

  .rounded-b-lg {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }

  .rounded-lg {
    border-radius: 8px !important;
  }

  .rounded-t-lg {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
  }

  .space-x-4 > *:not(:last-child) {
    margin-right: 16px !important;
  }

  .space-y-3 > *:not(:last-child) {
    margin-bottom: 12px !important;
  }

  .text-sm {
    font-size: 12px !important;
  }

  .text-xs {
    font-size: 10px !important;
  }

  .whitespace-nowrap {
    white-space: nowrap !important;
  }

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .right-0 {
    right: 0;
  }

  .pl-2 {
    padding-left: 8px;
  }

  .max-w-0 {
    max-width: 0;
  }

  .transition-max-w {
    transition: max-width 400ms;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .py-1\.5 {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .mb-1\.5 {
    margin-bottom: 6px;
  }
}

.border.border-tile-border {
  @include theme.propertyImportant(border, 1px solid #e4e6e7, 1px solid #2b2e30);
}

.border-b.border-tile-border {
  @include theme.propertyImportant(border-bottom, 1px solid #e4e6e7, 1px solid #2b2e30);
}

.border-t.border-tile-border {
  @include theme.propertyImportant(border-top, 1px solid #e4e6e7, 1px solid #2b2e30);
}

.hover-parent:hover {
  .hover-me-text-green2-600 {
    @include theme.propertyImportant(color, #016a24, #54c173) ;
  }

  .hover-me-text-neutral2-500 {
    @include theme.propertyImportant(color, #5c6066, #91969c);
  }

  .hover-me-max-w-25 {
    max-width: 100px;
  }
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.hidden {
  display: none;
}

.group:hover .group-hover\:block {
  display: block;
}
