quivr/frontend/app/studio/BrainsTabs/components/BrainItem/BrainItem.module.scss

@use "@/styles/Colors.module.scss";
@use "@/styles/Radius.module.scss";
@use "@/styles/ScreenSizes.module.scss";
@use "@/styles/Spacings.module.scss";
@use "@/styles/Typography.module.scss";
@use "@/styles/ZIndexes.module.scss";

.brain_item_wrapper {
  padding-inline: Spacings.$spacing05;
  overflow: hidden;
  display: flex;
  gap: Spacings.$spacing02;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-block: Spacings.$spacing03;
  border: 1px solid Colors.$lightest-black;
  border-radius: Radius.$normal;
  padding-block: Spacings.$spacing03;
  position: relative;
  overflow: visible;

  &:hover {
    border-color: Colors.$primary;
    background-color: Colors.$primary-lightest;
  }

  .brain_info_wrapper {
    padding-block: Spacings.$spacing03;
    padding-left: Spacings.$spacing03;
    display: flex;
    overflow: hidden;
    gap: Spacings.$spacing05;
    overflow: hidden;
    flex: 1;

    .name {
      @include Typography.EllipsisOverflow;
      width: 200px;
      color: Colors.$black;
    }

    .description {
      @include Typography.EllipsisOverflow;
      flex: 1;
      color: Colors.$dark-grey;
    }

    @media (max-width: ScreenSizes.$small) {
      .name {
        width: auto;
      }

      .description {
        display: none;
      }
    }
  }

  .options_modal {
    position: absolute;
    right: Spacings.$spacing02;
    top: Spacings.$spacing08;
    z-index: ZIndexes.$modal;
    padding-bottom: Spacings.$spacing01;
  }
}