@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.folder-ged {
  position: relative;
  margin: var(--spacing-s) 0 0;

  p,
  span {
    font-size: 13px;
  }

  &--active > .folder-ged__title {
    background-color: var(--color-primary);

    p {
      color: var(--color-light);
    }

    .folder-ged__title__arrow {
      transform: translateY(-50%) rotate(90deg);
    }

    .folder-ged__counter {
      color: var(--color-light);
    }
  }

  .sid2-arrow {
    position: absolute;
    top: 50%;
    left: -1.8rem;
    font-size: 12px;
    transform: translateY(-50%);
    transition: all 0.3s ease;

    &.arrow-rotate {
      transform: translateY(-50%) rotate(90deg);
    }
  }

  &__title {
    position: relative;
    padding: var(--spacing-s) 0 var(--spacing-s)
      calc(var(--spacing-xl) + var(--spacing-s));
    border-radius: 2rem;
    cursor: pointer;

    @include transition(background 0.4s);

    &__arrow {
      position: absolute;
      top: 50%;
      left: -15px;
      font-size: 13px;
      color: var(--color-primary);
      transform: translateY(-50%);

      @include transition(transform 0.4s);
    }
  }

  &__counter {
    margin-left: var(--spacing-xs);
    color: var(--color-text-light);

    @include transition(color 0.4s);
  }

  &:not(.folder-ged--active) > .folder-ged__title:hover {
    background-color: var(--color-grey-100);
  }

  i:not(.sid2-arrow) {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    margin-right: 0.8rem;
    color: var(--color-primary);
    transform: translateY(-50%);
    transition: all 0.3s ease;

    @include fontSize(12);

    &.sid2-folder-filled,
    &.sid2-folder-open {
      transition: all 0.3s ease;
    }

    &.sid2-folder-open {
      left: 1.7rem;
      font-size: var(--font-size-labor);
    }
  }

  i,
  p {
    @include transition(color 0.4s);
  }
}

.folder-ged__sub {
  padding-left: var(--spacing-m);
  margin-bottom: 1.6rem;
}

.list-ged__file {
  display: none;
}
