@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.module-toggle-container {
  display: flex;
  justify-content: space-between;
  width: fit-content;
  gap: 8px;
  position: fixed;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  .module-list {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: #{$border-radius-extra-large};
    box-shadow: var(--box-shadow-medium);
    background-color: var(--background-color);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    .module {
      font-size: var(--font-size-small);
      z-index: 1;
    }
    .icon{
        @include flex-center;
        z-index: 1;
    }
    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: var(--highlight-accent-color);
        transition: width 0.2s;
        border-radius: #{$border-radius-extra-large};
    }
    &:hover{
        &::after {
            width: 100%;
        }
    }
  }
  .active {
    cursor: default;
    background-color: var(--accent-color);
    &::after{
        display: none;
    }
    &:hover {
      background-color: var(--accent-color);
    }
    .module {
      color: var(--highlight-accent-color);
    }
  }
}