.lr-icon {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1rem;
  height: 1rem;

  &.is--primary {
    stroke: var(--primary-color);
  }

  &.is--folder {
    width: 7rem;
    height: 7rem;
  }
}

.is--disabled {
  pointer-events: none;
  cursor: not-allowed;
  filter: var(--button-disabled-filter);
}

.lr-media {
  grid-area: media;
  gap: 2rem 1rem;
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: calc(var(--page-height) - var(--control-height) - 1rem - var(--font-size) - 0.5rem - 1rem - 0.25rem);
  overflow: auto;
  padding-right: 1rem;
}

.lr-media__container {
  display: grid;
  height: var(--page-height);
  grid-template:
    'toolbar toolbar' auto
    'breadcrumb breadcrumb' auto
    'media details' 1fr / 3fr 1fr;
  row-gap: 1rem;
  overflow: hidden;

  .cosmo-toolbar {
    grid-row: toolbar;
  }
}

.lr-media__folder,
.lr-media__file {
  height: 8rem;
  width: 8rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.lr-media__folder {
  span {
    text-align: center;
    margin-top: -0.75rem;
  }
}

.lr-media__check {
  background: var(--primary-color);
  position: absolute;
  left: -0.25rem;
  top: -0.25rem;
  display: none;
  height: 2rem;
  width: 2rem;
  justify-content: center;
  align-items: center;

  &::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    display: block;
    border: 1rem solid var(--primary-color);
    border-right-color: transparent;
    border-bottom-color: transparent;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 2rem;
    display: block;
    border: 1rem solid var(--primary-color);
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
}

.lr-media__file {
  background: var(--primary-color-alpha-25);
  height: 12rem;
  width: 12rem;
  overflow: hidden;
  border-radius: var(--border-radius);

  img {
    object-fit: cover;
    height: 12rem;
    width: 12rem;
  }

  &.is--selected {
    border: 0.25rem solid var(--primary-color);
    position: relative;

    .lr-media__check {
      display: flex;
    }
  }

  &:hover {
    img {
      object-fit: scale-down;
    }

    &::after {
      content: attr(title);
      background: var(--primary-color);
      color: var(--white);
      padding: 0.25rem;
      width: 100%;
      text-align: center;
      white-space: pre;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.lr-media__folders,
.lr-media__files {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  align-content: start;
}

.lr-media__folders {
  border-bottom: 0.0625rem solid var(--primary-color);
  padding-bottom: 1rem;

  &:empty {
    display: none;
  }
}

.lr-media__details {
  grid-area: details;
  max-height: calc(var(--page-height) - var(--control-height) - 1rem - var(--font-size) - 0.5rem - 1rem - 0.25rem);
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;
  text-decoration: none;
  border-left: 0.0625rem solid var(--primary-color);
  padding-left: 1rem;
  /* stylelint-disable no-descending-specificity */
  img {
    /* stylelint-enable no-descending-specificity */
    object-fit: scale-down;
    max-height: 100%;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  h2 {
    margin: 0 0 0.5rem;
    width: 100%;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:empty {
    display: none;
  }
}

.lr-breadcrumb {
  display: flex;
  justify-content: start;
  align-items: center;
  grid-row: breadcrumb;

  .lr-breadcrumb__item {
    font-size: 1rem;
    text-decoration: none;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border: 0.0625rem solid var(--primary-color);
    padding: 0.25rem 0.5rem;
    transition: all 0.3s;
    cursor: pointer;

    &:first-child {
      border-bottom-left-radius: var(--border-radius);
      border-top-left-radius: var(--border-radius);
    }

    &:last-child {
      border-bottom-right-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
    }

    &:hover {
      background-color: var(--primary-color);
      color: var(--white);
    }
  }
}

.lr-breadcrumb__separator {
  padding: 0.25rem 0.5rem;
  height: 100%;
  width: 2rem;
  border: 0.0625rem solid var(--primary-color);
  border-left: 0;
  border-right: 0;
  color: var(--primary-color);
}

.cosmo-button {
  display: flex;
  gap: 0.5rem;
}