@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';

.session-supervising-candidate-in-list {
  position: relative;
  margin-bottom: var(--pix-spacing-3x);
  border-radius: 4px;
  display: flex;
  @extend %pix-body-s;
  color: var(--pix-neutral-0);

  &__candidate-data {
    width: calc(100% - var(--pix-spacing-8x));
    padding: var(--pix-spacing-2x) var(--pix-spacing-4x);

    @include breakpoints.device-is('tablet') {
      display: flex;
      flex-direction: row-reverse;
      gap: var(--pix-spacing-4x);
    }
  }

  &__infos {
    flex-grow: 1;
  }

  &__status {
    flex-shrink: 0;

    @include breakpoints.device-is('mobile') {
      margin-bottom: var(--pix-spacing-2x);
    }
  }

  &__full-name {
    color: var(--pix-secondary-500);
    text-transform: capitalize;
    font-weight: bold;

    @extend %pix-body-m;
  }

  &__top-information {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--pix-spacing-2x);

    @include breakpoints.device-is('tablet') {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  &__middle-information {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-1x);
  }

  &__bottom-information {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-3x);
    width: fit-content;

    @include breakpoints.device-is('tablet') {
      flex-direction: row;
      justify-content: space-between;
      width: auto;
    }
  }

  &__confirm-button {
    width: fit-content;
  }

  &__menu {
    border-left: 1px solid var(--pix-neutral-100);
    padding: var(--pix-spacing-2x);

    .pix-icon-button {
      color: var(--pix-neutral-0);

      &:hover {
        color: var(--pix-neutral-800);
      }
    }
  }

  .dropdown__content {
    right: 0;
    top: 32px;
    width: 216px;
  }
}

.session-supervising-candidate-in-list-details {
  &__enrolment {
    display: flex;
    align-items: center;
    gap: var(--pix-spacing-1x);
  }
}

.session-supervising-candidate-in-list-details-enrolment {
  &__icon {
    width: 1rem;
    height: 1rem;
  }
}

.session-supervising-candidate-in-list-details-time {
  display: flex;
  align-items: center;
  gap: var(--pix-spacing-2x);
  width: fit-content;
  margin-top: var(--pix-spacing-1x);

  @include breakpoints.device-is('mobile') {
    flex-direction: column;
    align-items: flex-start;

    &__end-date-time::before {
      content: none;
    }
  }

  &__text {
    padding: 4px var(--pix-spacing-2x);
    background-color: rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--pix-neutral-0);
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: var(--pix-spacing-1x);

    &__end-date-time {
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: block;
        width: 1px;
        height: 1em;
        margin-inline: var(--pix-spacing-1x) var(--pix-spacing-2x);
        background-color: var(--pix-neutral-0);
      }
    }

    time {
      font-weight: 500;
    }
  }

  &__clock {
    width: 1rem;
    fill: var(--pix-neutral-0);
  }
}
