@import '~elements-sk/icon/icon-sk';
@import '~elements-sk/toast-sk/toast-sk';
@import '~elements-sk/styles/buttons/buttons';
@import '~elements-sk/themes/themes';
@import '../theme/theme';

machine-server-sk {
  --header-height: 40px;

  header {
    padding: 8px;
    background: var(--surface-1dp);
    display: flex;
    width: calc(100% - 16px);
    border-bottom: solid 1px var(--on-surface);
    position: fixed;
    top: 0;
    z-index: 10;
    justify-content: space-between;

    #header-rhs {
      display: flex;
      align-items: center;
    }
  }

  table {
    border-collapse: collapse;
  }

  thead {
    background: var(--surface-1dp);
    position: sticky;
    z-index: 1;
    top: var(--header-height);

    // If we just put a bottom border on the thead, it scrolls away when you
    // scroll the table.
    &:after {
      bottom: 0;
      border-bottom: solid 1px var(--on-surface);
      content: "";
      position: absolute;
      width: 100%;
    }
  }

  tr {
    border-bottom: 1px solid var(--on-background);
  }

  // In both the thead (so it doesn't pile up with the :after border at some
  // zoom levels) and the tbody:
  tr:last-child {
    border-bottom: none;
  }

  th {
    padding: 4px;
  }

  td {
    vertical-align: top;
    padding: 8px 4px 4px 4px;
  }

  td.outOfSpec {
    color: var(--error);
    font-weight: bold;
  }

  main {
    margin-top: var(--header-height);
  }

  a:visited,
  a {
    color: var(--primary);
  }

  // Override the <button> styles from elements-sk to produce more compact buttons.
  //
  // This is not necessary under Webpack because this component does not explicitly import the
  // button.scss stylesheet from elements-sk. The Bazel build, however, automatically imports the
  // styles of any elements-sk components referenced from TypeScript. Thus, we need to reset the
  // below styles.
  button {
    height: auto !important;
    margin: 0;
    padding: 4px;
    text-transform: capitalize;
  }
}

machine-server-sk[waiting] * {
  cursor: wait;
}