@import 'functions/rem';
@import 'functions/mod';

@import 'env';

:host {
  position: relative;
  display: flex;
  gap: 1em;
  width: 70vw;
  --server-list-font-size: 1rem;
  --server-list-row-height: 2rem;
}

.server-list-action-bar {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin-bottom: 1%;

  hr {
    width: 100%;
    margin-block-start: 1em;
    margin-block-end: 1em;
  }

  .server-list-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75em;

    .filter-checkbox {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }
  }

  .server-count {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex: 1 1 auto;
  }

  .server-list-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;

    button {
      min-width: 4em;
      padding: 0.5em;
      background-color: #292929;
      border-radius: 2px;
    }
  }
}

.scrollbar-offset {
  margin-right: 1rem;
  //overflow-y: scroll;
}

.serverlist-alternative {
  height: calc(60vh - var(--server-list-row-height) - 1px);
  display: flex;
  justify-content: center;
  align-items: center;

  &.serverlist-loading {
    flex: 1 1 auto;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.virtual-viewport {
  height: calc(60vh - var(--server-list-row-height) - 1px);
  width: 100%;
}

.search-list-server {
  display: inline-block;
  background-color: rgba($color: #292929, $alpha: 0.6);
  font-size: 0.85rem;
  border-radius: 7px;
  height: 1.5rem;
}

.server-list {
  flex: 1 1 auto;
  overflow: auto;
  max-height: 60vh;
  height: 60vh;

  cdk-virtual-scroll-viewport {
    overflow-y: scroll;
  }

  .server-list-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

    .row {
      height: var(--server-list-row-height);
      line-height: var(--server-list-row-height);
      display: flex;
      align-items: center;
      width: 100%;
      border-bottom: 1px solid grey;
      border-collapse: separate;
      font-size: var(--server-list-font-size);

      &.odd {
        background: transparentize(mod($-color-background, 1), 0.95);
      }

      :nth-child(2) {
        flex: 1 1 auto;
      }

      > div {
        padding-left: 5px;
        padding-right: 5px;
      }

      &.header {
        & > div {
          display: flex;
          align-items: center;
        }
      }
    }

    .offline {
      background-color: #ff9494;
    }

    .server-compatible {
      color: green;
    }

    .server-incompatible {
      color: red;
    }

    .join-button {
      padding: 0.25vw;
      background-color: #292929;
      border-radius: 2px;
      margin-left: 5%;
      margin-right: 5%;
      float: right;
    }

    .server-list-favorite {
      color: white;

      &:hover {
        color: gray;
      }

      &.not {
        color: gray;

        &:hover {
          color: white;
        }
      }
    }
  }
}
