/*
Стили повторяющихся элементов со всех страниц
*/

.breadcrumbs {
  background-color: white;
  box-shadow: var(--shadow-sm);

  padding: var(--space-3) var(--space-5);
  @container (width < 50rem) {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-sm);
  }

  display: flex;
  column-gap: var(--space-3);
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  justify-items: start;
  align-items: center;

  > .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .crumb-item:last-child {
      font-weight: var(--font-weight-semibold);
    }

    .crumb-chevron {
      color: var(--color-gray-400);

      width: var(--space-5);
      @container (width < 50rem) {
        width: var(--space-4);
      }

      aspect-ratio: 1;
    }
  }

  > .crumb-current-user {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);

    background: var(--color-primary-50);
    padding: var(--space-1) var(--space-3);

  }
}

.classes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  > .class {
    cursor: pointer;
    max-width: 28rem;
    background: var(--color-primary-50);
    border-radius: var(--corner-radius);
    border: var(--space-1) solid var(--color-primary-600);

    padding: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;

    font-size: var(--text-xl);
    text-decoration: none;

    &:hover {
      background: var(--color-primary-100);
      border-inline-start-color: var(--color-primary-300);
    }

    .class__picture {
      position: relative;
      width: var(--space-7);
      height: var(--space-7);
    }

    .class__picture:not([data-fallback]) {
      box-shadow: 0 0 1px 1px hsl(from var(--color-primary-800) h s l / 0.1);
    }

    .class__picture[data-fallback] {
      background: white;
    }

    .class__name {
      color: var(--color-gray-950);
    }
  }
}

select:not(.unstyled-select) {
  background: white;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-sm);

  &:hover, &:focus-visible {
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-400);
  }
}

.icon-button {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;

  svg {
    width: 0.825em;
    aspect-ratio: 1;
    color: var(--button-color-dim);
  }
}

.inline-icon > svg {
  display: inline-block;
  width: 2ch;
  height: 2ch;
  vertical-align: middle;
}

time > .timestamp-timezone {
  font-size: 0.825em;
  color: var(--color-gray-600);
}