@use "../component" as *;

$color-menu-bg: #464854 !default;
$color-menu-border: #2D2E36;
$header-height: 44px !default;
$sidebar-menu-width: 220px !default;

:root {
  --color-menu-bg: #{$color-menu-bg};
  --color-menu-border: #{$color-menu-border};
  --header-height: #{$header-height};
  --sidebar-menu-width: #{$sidebar-menu-width};
}

header.default-header {
  height: var(--header-height);
  background-color: var(--header-bg);
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 200;

  .header-logo {
    @extend .bs-clickable;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    color: var(--header-text);
    font-size: 1.2307em;
    font-weight: 500;
    line-height: 1;

    em {
      display: inline-flex;
      align-items: center;
      margin-right: 6px;
      padding: 2px 4px;
      border-radius: 4px;
      background-color: var(--header-text);
      color: var(--header-bg);
      font-size: 1em;
      font-weight: 700;
    }
  }

  &.fixed-menu .header-logo {
    min-width: calc(var(--sidebar-menu-width) - 48px);
  }

  .sidebar-menu {
    width: 48px;
    align-self: stretch;

    .menu-btn {
      @extend .bs-clickable;
      font-size: 1.375rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: var(--header-height);
      max-width: var(--header-height);
      line-height: var(--header-height);
      color: var(--header-text);
      margin-left: 8px;
    }

    .menu-container {
      position: absolute;
      background-color: var(--color-menu-bg);
      height: calc(100vh - var(--header-height));
      width: var(--sidebar-menu-width);
      overflow: auto;
      padding-bottom: 100px;
    }

    .sidebar-menu-item {
      border-top: 1px solid var(--color-menu-border);
      color: var(--header-text);

      a.sidebar-menu-link, div.sidebar-menu-link {
        @extend .bs-clickable;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        color: #A9A9AE;
        text-decoration: none;

        .font-icon {
          font-size: .8rem;
        }
      }

      .sidebar-submenu {
        padding: 8px 16px 8px 8px;
        background-color: var(--color-menu-border);

        > a.sidebar-menu-link, > div.sidebar-menu-link {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 0 8px 20px;

          &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 8px;
            display: block;
            width: 2px;
            height: 2px;
            background-color: var(--gray-400);
          }

          .font-icon {
            margin-left: 8px;
            font-size: .8rem;

            &.filled {
              color: var(--secondary);
            }
          }
        }
      }
    }
  }

  .header-tabs {
    margin: 0 4px 0 16px;
    display: flex;
    align-items: end;
    gap: 1px;
    flex-grow: 1;
    align-self: end;
    overflow-x: auto;
    scrollbar-width: none;

    .header-tab {
      background-color: var(--header-tab-bg);
      padding: 0 12px;
      height: 32px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      flex-grow: 1;
      position: relative;
      max-width: 180px;
      min-width: 48px;
      color: var(--header-text);
      cursor: pointer;

      .header-title {
        padding-right: 6px;
        width: 50px;
        flex-basis: 180px;
        overflow: hidden;
        white-space: nowrap;
        mask-image: linear-gradient(to right, #000 85%, transparent 95%);
      }

      .close-btn {
        @extend .bs-clickable;
        right: 4px;
        display: none;
      }

      &:hover {
        .header-title {
          mask-image: linear-gradient(to right, #000 80%, transparent 90%);
        }

        .close-btn {
          position: absolute;
          top: 4px;
          right: 8px;
          display: block;
        }
      }

      &:hover:not(.selected) {
        background-color: color-mix(in srgb, var(--header-tab-bg) 80%, white 20%);
      }

      &.selected {
        color: var(--header-tab-text);
        background-color: var(--header-tab-selected);

        &:hover {
          background-color: var(--header-tab-selected);
        }
      }
    }
  }

  .header-tab-list-button {
    align-self: end;

    .tab-list-button {
      min-width: 20px;
      height: 32px;
      padding: 4px 2px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      color: var(--header-text);
      background-color: var(--header-tab-bg);
      user-select: none;
      cursor: pointer;

      &:hover:not(:active) {
        opacity: .8;
      }

      &:active {
        opacity: 1;
      }
    }
  }
}

html {
  background-color: var(--body-bg);
}

.default-body {
  background-color: var(--body-bg);
  color: var(--body-text);
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));

  &.fixed-menu {
    padding-left: var(--sidebar-menu-width);
  }

  .body-tab:has(>div.h-full) {
    height: calc(100vh - var(--header-height));
  }

  .fixed-header {
    position: fixed;
    width: 100%;
    min-height: 43px;
    border-bottom: 1px solid var(--border);
    background-color: var(--body-bg);
    padding: 8px 16px;
    z-index: 10;
  }

  &.fixed-menu .fixed-header {
    width: calc(100% - var(--sidebar-menu-width));
  }

  .colored-bg {
    flex-grow: 1;
    background-color: var(--colored-bg);

    > .box-style {
      background-color: var(--body-bg);
      border-radius: 10px;
    }

    .dashboard-box-style {
      background-color: var(--body-bg);
      padding: 16px;
      border-radius: 10px;

      .title {
        font-weight: 500;
        line-height: 1;
        margin-bottom: 8px;
      }
    }
  }
}

.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: all 0.2s ease-out;
}

.menu-slide-enter-from {
  transform: translateX(-100%);
}

.menu-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}