@use '@growi/core/scss/bootstrap/init' as bs;

@use '@growi/core/scss/growi-official-colors';

@use '../button-styles';
@use '../variables' as var;

// GROWI Logo
.grw-app-title :global {
  .grw-logo {
    $width: var.$grw-sidebar-nav-width;
    $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
    $logomark-width: 27.7px;
    $logomark-height: 24px;

    width: $width;

    svg {
      width: $width;
      height: $height;
      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
    }
  }
}


// Collapsed Mode
.grw-app-title {
  &:global {
    &.collapsed {
      left: 48px;
    }
  }
}

// == Colors
.grw-app-title :global {
  .grw-logo {
    // set transition for fill
    svg, svg * {
      transition: fill 0.8s ease-out;
    }

    fill: var(--grw-app-title-color, var(--bs-tertiary-color));

    &:hover {
      svg {
        .group1 {
          fill: growi-official-colors.$growi-green;
        }

        .group2 {
          fill: growi-official-colors.$growi-blue;
        }
      }
    }
  }

  .grw-site-name {
    --bs-link-color-rgb: var(--grw-app-title-color-rgb, var(--bs-tertiary-color-rgb));
    --bs-link-opacity: 0.5;
  }
}