// See COPYRIGHT.md for copyright information

#inspector .overview-inspector {
  .body {
    .total-facts-value,
    .mandatory-facts-value,
    .hidden-facts-value {
      .inline-button();
    }

    table.tag-summary {
      width: 100%;
      border-collapse: collapse;

      thead, tfoot {
        th, td {
          background-color: var(--colour-table-header-bg);

          & > div {
            max-height: 2.6rem;
          }
        }
      }

      tfoot {
        th, td {
          transition: padding-top 0.5s 0s ease, border-bottom-width 0s 0s ease;

          & > div {
            transition: max-height 0.5s ease;
            overflow: hidden;
          }
        }

        .tag-count-percent {
          opacity: 0;
        }
      }

      tr {
        td, th {
          border: solid 1px var(--colour-border-grey);
          line-height: 2.6rem;
          font-weight: normal;
          padding: 0.5rem;
          text-align: center;

          & > div {
            position: relative;

            & > span {
              opacity: 1;
              transition: opacity 0.5s 0.1s ease-out;
            }

            span.tag-count-percent {
               display: block;
               position: absolute;
               inset: 0;
            }
          }
        }

        & > :first-child {
          text-align: left;
          padding: 0.5rem 0.8rem;
        }

        & > :not(:first-child, :last-child) {
          border-right: none;
        }

        & > :not(:first-child) {
          border-left: none;
        }
      }

      &:not(.show-percent) {
        tbody .tag-count-percent {
          opacity: 0;
          transition: opacity 0.5s 0s ease-in;
        }
      }

      &.show-percent {
        tbody .tag-count-number {
          opacity: 0;
          transition: opacity 0.5s 0s ease-in;
        }

        tfoot {
          td, th {
            padding-top: 0;
            padding-bottom: 0;
            border-bottom-width: 0;
            transition: border-bottom-width 0s 0.5s ease;

            & > div {
              max-height: 0;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

.radio-pills {
  & > button {
    &.selected {
      background-color: var(--colour-active-bg);
    }

    &:first-of-type {
      border-top-left-radius: 0.4rem;
      border-bottom-left-radius: 0.4rem;
    }

    &:not(:last-of-type) {
      border-right: none;
    }

    &:last-of-type {
      border-top-right-radius: 0.4rem;
      border-bottom-right-radius: 0.4rem;
    }

    &:focus-visible {
      z-index: 1;
    }

    cursor: pointer;
    text-align: center;
    flex: 1 1 0;
    background-color: var(--colour-inactive-bg);
    border: solid 1px var(--colour-border-grey);
    border-radius: 0;
  }

  display: flex;
}

.flex-row {
  & > * {
    flex: 1 1 0;
    min-width: 14rem;
  }

  gap: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

