.extra-network-thumbs {
  .name {
    overflow: hidden;
    display: block;

    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;

    background: transparent;
  }
}

.extra-networks {
  .tab-nav {
    align-items: center;

    > * {
      height: 40px !important;
      margin: 0 !important;
      font-size: 14px !important;
    }
  }

  .extra-network-subdirs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;

    margin-bottom: 12px;
    padding: 0 !important;

    > button {
      cursor: pointer;

      zoom: 0.8;

      flex: 1;

      min-width: 100px;
      margin: 0;
    }
  }

  .actions {
    .name {
      overflow: hidden;
      display: block;

      font-weight: bold;
      text-overflow: ellipsis;
      text-shadow: 0 1px 1px rgb(0 0 0 / 90%);
      white-space: nowrap;

      background: linear-gradient(0deg, rgb(0 0 0 / 80%), transparent);
    }

    .additional {
      display: none;

      > ul {
        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;

        a {
          margin: 0 !important;
          padding: 0 !important;

          font-size: 15px !important;
          color: #fff;
          text-overflow: ellipsis;
          text-shadow: 1px 1px black;
          white-space: nowrap;
        }
      }
    }
  }

  .card {
    overflow: hidden;

    background-size: cover;
    border-radius: var(--border-radius-xs);
    outline: 1px solid rgb(0 0 0 / 50%);
    box-shadow: var(--box-shadow);

    transition: all 0.2s ease-in-out;

    .name {
      font-size: 12px !important;
    }

    &:hover {
      outline: 2px solid var(--color-primary);

      .additional {
        display: block;
      }

      .name {
        white-space: unset;
      }
    }
  }

  .metadata-button {
    top: 50% !important;
    transform: translateY(-50%);

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    font-size: 20px !important;
    text-shadow: none !important;

    opacity: 0;
    background: rgba(0, 0, 0, 70%);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;

    &:hover {
      color: #fff !important;
      opacity: 1;
    }
  }
}

#txt2img_extra_networks,
#img2img_extra_networks {
  .tabitem.gradio-tabitem.svelte-19hvt5v {
    padding: 0;
    background: transparent;
  }

  .search {
    box-sizing: border-box;
    width: var(--fill-available);
    max-width: var(--fill-available);
    max-height: 36px !important;
    padding: 8px;
  }

  button {
    height: 32px !important;
  }
}