@use "sass:map";

:host {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;

  width: fit-content;
  min-width: 100%;
  height: 64px;

  box-sizing: border-box;
  box-shadow: 0 2px 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
  background-color: light-dark(oklch(1 0 0 / 60%), oklch(0 0 0 / 60%));

  backdrop-filter: blur(20px);

  contain: layout paint;
  isolation: isolate;
  z-index: 100;

  .menu-left, .menu-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;

    .menu-items {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 48px;

      &.hidden {
        position: absolute;
        top: -100000px;
        pointer-events: none;
      }
    }

    & > * {
      user-select: none;
    }

    .menu-item, a {
      text-decoration: none;
      font-size: 18px;
      height: 40px;
      align-content: center;
      vertical-align: middle;
      white-space: nowrap;
      font-family: inherit;
      color: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;

      &.nav-link {
        font-weight: 700;
        color: oklch(0.6 0.15 250);
        transition: opacity 0.3s;

        &:hover {
          opacity: 0.7;
        }
      }

      &.dummy-link {
        cursor: not-allowed;
      }

      strong {
        font-weight: 700;
      }
    }

    .settings, .menu {
      border: none;
      border-radius: 100%;
      background-color: inherit;
      padding: 0;

      position: relative;
      z-index: 10;
      cursor: pointer;
    }

    .settings {
      transition: transform 0.3s ease;

      &:hover {
        transform: rotate(30deg);
      }
    }

    .menu {
      &.hidden {
        position: absolute;
        top: -100000px;
        pointer-events: none;
      }
    }

    /* 구체적인 아이콘 예외 처리 */
    .icon-40 {
      height: auto;
    }
  }

  .menu-left {
    position: absolute;
    left: 0;

    justify-content: start;
    padding: 12px;

    .brand {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      gap: 0;
      cursor: pointer;
      margin-left: 10px;

      &:hover {
        opacity: 0.7;
      }

      img {
        display: inline-block;
        height: 20px;
        padding: 10px 0;
      }

      strong {
        font-weight: 900 !important;
      }

      span {
        display: inline-block;
        padding-left: 10px;

        &.hidden {
          position: absolute;
          top: -100000px;
          pointer-events: none;
        }
      }
    }
  }

  .menu-right {
    position: absolute;
    right: 0;

    justify-content: flex-end;
    padding: 12px 20px 12px 12px;
  }
}