/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.catalog-tags-table {
  :global {
    .tag-name {
      max-width: fit-content;
      display: flex;
      align-items: center;
      gap: var(--dremio--spacing--05);
      padding: 2px var(--dremio--spacing--05);
      border-radius: var(--dremio--radius--1);
      background-color: var(--fill--tertiary);

      &__icon {
        height: 20px;
        min-width: 20px;
        color: var(--icon--primary);
      }

      &__name {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .author {
      display: flex;
      align-items: center;
      gap: var(--dremio--spacing--1);

      &__name {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .commit-id {
      display: flex;
      align-items: center;
      gap: var(--dremio--spacing--05);

      &__icon {
        height: 24px;
        min-width: 24px;
        color: var(--icon--primary);
      }

      &__id {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .copy-button {
        opacity: 0;
      }
    }

    .leantable__body-row {
      &:hover {
        .copy-button {
          opacity: 1;
        }
      }
      .copy-button:focus {
        opacity: 1;
      }
    }

    .commit-message {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .commit-time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--icon--primary);

      &__time {
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text--primary);
      }

      &__buttons {
        display: flex;
        align-items: center;

        // Float the buttons so that it does not affect the line-height
        // Without this, the table will think it's scrolling when switching from Skeleton -> Data since the line heights dont match
        float: left;

        &--data {
          color: var(--icon--primary) !important;
          &:hover,
          &:focus-visible {
            color: var(--icon--hover) !important;
          }
        }

        &--more .settings-button {
          height: 32px;
          width: 32px;
          align-items: center;
          justify-content: center;
          user-select: none;
          color: inherit;
          padding: var(--dremio--spacing--05);
          transition: color 125ms ease-in-out;
          background-color: transparent;
          border: none;

          .more-icon {
            height: 24px;
            width: 24px;
          }

          &:hover,
          &:focus-visible {
            color: var(--icon--hover) !important;
          }
        }
      }
    }
  }

  &__empty {
    dremio-icon {
      width: 40vh;
      height: 40vh;

      & + span {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
}
