.aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  position: relative;
  max-width: 183px;
  width: 100%;

  height: 100%;

  @media screen and (max-width: 768px) {
    display: none;
  }
}

.logo {
  text-align: center;
}

.asideNavigation {
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-primary);
  border-radius: 12px;

  .tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 24px;

    position: relative;
    width: 100%;

    li {
      width: 100%;
    }
  }

  .tab {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    height: 40px;
    padding: 8px 24px;
    border-radius: 8px;
    cursor: pointer;

    .icon {
      --fill: var(--text-primary);
    }

    transition: background-color 0.4s;
  }

  .tab.active,
  .tab:hover {
    background-color: rgba(64, 151, 220, 0.04);

    .icon {
      --fill: var(--blue-100);
    }

    color: var(--blue-100);
  }
}

.asideOptions {
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-primary);
  border-radius: 12px;

  width: 100%;

  ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 36px;

    position: relative;
  }

  .logout .icon {
    --fill: var(--red-100);
  }

  .settings .icon {
    --fill: var(--text-tertiary);
  }
}
