/*
 * @file
 * The vertical tabs within the media library that show when you're able to
 * add multiple types of media.
 */

.media-library-menu {
  position: relative;
  width: var(--vertical-tabs-menu-width);
  margin: 0;
  list-style: none;
  color: var(--admin-color-text);
  border-color: var(--admin-color-border);
  background-color: var(--admin-color-bg);
}

.media-library-menu__item {
  margin: 0;
  padding: 0;

  &::before {
    z-index: var(--vertical-tabs-menu--z-index);
    /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
    display: block;
    width: 100%;
    margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);
    content: "";
    border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  }

  /* On active items, extend by 1px to remove right border. */
  &:has(.media-library-menu__link.active) {
    width: calc(100% + 1px);
  }
}

/* Tab links within the vertical tabs. */
.media-library-menu__link {
  position: relative;
  display: block;
  margin-block-start: calc(var(--vertical-tabs-border-size) * -1);
  padding: var(--admin-space-s);
  padding-inline-start: calc(var(--admin-space-l) - var(--vertical-tabs-menu-link--active-border-size));
  text-decoration: none;
  color: var(--admin-color-text);
  border: var(--vertical-tabs-border-size) solid var(--admin-color-border);
  border-inline-end-width: 0;
  border-inline-start-width: var(--vertical-tabs-menu-link--active-border-size);
  border-start-start-radius: var(--vertical-tabs-border-radius);
  border-end-start-radius: var(--vertical-tabs-border-radius);
  background-color: transparent;
  text-shadow: none;

  /* Menu link states. */
  &:focus {
    z-index: calc(var(--vertical-tabs-menu--z-index) + 3);
    /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
    text-decoration: none;
    outline: 0;
  }

  &:hover {
    text-decoration: none;
    color: var(--admin-color-link);
    /* These borders are necessary to replace the dividing lines while in the hover state. */
    border-block: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
    background: var(--admin-color-bg-item-hover);
  }

  /* This pseudo element provides the background for the hover state. */
  &::before {
    position: absolute;
    z-index: calc(var(--vertical-tabs-menu--z-index) - 1);
    /* This should be on a lower level than the menu-item separator lines. */
    inset-block: calc(var(--vertical-tabs-border-size) * -1);
    inset-inline-start: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
    inset-inline-end: 0;
    content: "";
    pointer-events: none;
    background-clip: padding-box;
  }

  &:focus::after {
    position: absolute;
    inset: 0;
    margin-block: calc(var(--vertical-tabs-border-size) * -1);
    margin-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;
    content: "";
    pointer-events: none;
    border: var(--admin-radius-xs) solid var(--admin-color-focus);
    border-inline-end: 0;
    border-radius: var(--vertical-tabs-border-radius);
  }

  &.active {
    z-index: calc(var(--vertical-tabs-menu--z-index) + 2);
    /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
    color: var(--admin-color-link);
    border-color: var(--vertical-tabs-border-color) transparent;
    background-color: var(--admin-color-bg-surface);
    box-shadow: var(--vertical-tabs-shadow);

    &:hover {
      color: var(--admin-color-link-hover);
      background-color: var(--admin-color-bg-item-hover);
    }

    &::before {
      z-index: 1;
      /* The blue active-tab indication should be on a higher level than the green focus border. */
      border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
      border-inline-start-color: var(--admin-color-primary);
      border-start-start-radius: var(--admin-radius-2xs);
      border-end-start-radius: var(--admin-radius-2xs);
    }

    &:hover::before {
      background: none;
    }
  }

  /* Gin state overrides — must come after base states so source-order cascade wins. */
  &:active,
  &:hover,
  &:focus,
  &.active,
  &:hover:focus,
  &.active:hover,
  &.active:focus {
    color: var(--admin-color-primary);
    border-inline-end: 0 none;
    border-block-end: 1px solid var(--admin-color-border);
    background-color: var(--admin-color-bg-surface);
    box-shadow: none;
    text-shadow: none;
  }
}
