@import "../style/colors";

$laNavSidebarWidth: 120px;
$laNavSidebarButtonWidth: 120px;
$laNavSidebarButtonHeight: 92px;
$laNavSidebarButtonCompactHeight: 64px;

.la-nav-sidebar {
  border: none;
  margin: 0;
  padding: 0;
  width: $laNavSidebarWidth;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  /* Default icon color */
  .la-icon-button {
    width: $laNavSidebarButtonWidth;
    height: $laNavSidebarButtonHeight;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .la-icon {
      fill: $midnight-4;
    }
    .la-text {
      color: $midnight-4;
    }
  }

  /* Hover button */
  .la-icon-button--hover {
    .la-icon {
      fill: $midnight-3;
    }
    .la-text {
      color: $midnight-3;
    }
  }

  /* Active button */
  .la-icon-button--active {
    .la-icon {
      fill: $midnight-2;
    }
    .la-text {
      color: $midnight-2;
    }
  }

  /* Compact Mode support */
  &.la-nav-sidebar--compact {
    .la-icon-button {
      height: $laNavSidebarButtonCompactHeight;
    }

    la-text {
      display: none;
    }
  }
}