/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

.Catalog {
  :global(.TableHead) .entityName {
    /* offset for icon to align texts in the column */
    padding-left: calc(21px + var(--padding) * 2.5);
  }

  :global(.TableRow):hover .pinIcon {
    display: block;
  }
}

.entityName {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--padding);
  padding-bottom: 0;
  padding-right: 24px; // + reserved space for .pinIcon

  > span {
    overflow: hidden;
    text-overflow: ellipsis;  
    padding-left: var(--padding);
  }

  :global(.HotbarIcon){
    align-self: center;

    div {
      /* icons with plain text */
      font-size: var(--unit);
    }

    .Icon {
      /* icons with font-icon */
      font-size: var(--small-size);
    }
  }

  .pinIcon {
    position: absolute;
    right: 0;
    transition: none;
    display: none;

    &:hover {
      /* Drop styles defined for <Icon/>  */
      background-color: transparent;
      box-shadow: none;
    }
  }
}

.sourceCell {
  max-width: 100px;
}

.statusCell {
  max-width: 100px;

  :global {
    .connected, .available {
      color: var(--colorSuccess);
    }

    .disconnected, .deleting, .unavailable {
      color: var(--halfGray);
    }
  }
}

.labelsCell {
  overflow-x: scroll;
  text-overflow: unset;
}

.labelsCell::-webkit-scrollbar {
  display: none;
}

.badge {
  overflow: unset;
  text-overflow: unset;
  max-width: unset;
}

.badge:hover {
  color: var(--textColorAccent);
}

.badge:not(:first-child) {
  margin-left: 0.5em;
}

.catalogIcon {
  font-size: 10px;
  -webkit-font-smoothing: auto;
}

.tabs {
  @apply flex flex-grow flex-col;
}

.tab {
  @apply px-8 py-4;
}

.tab:hover {
  background-color: var(--sidebarItemHoverBackground);
  --color-active: var(--textColorTertiary);
}

.tab::after {
  display: none;
}

.activeTab, .activeTab:hover {
  background-color: var(--blue);
  --color-active: white;
}