@import '../../../../common';

:host ::ng-deep {
  .ant-card-body {
    flex: 1 1 auto;
  }

  .ant-input-clear-icon {
    color: var(--interact-color);
  }

  .ant-input-group-addon {
    font-weight: 600;
    font-size: 16px;
  }

  .with-addon-before {
    width: 100%;

    .ant-select-selector {
      border-bottom-left-radius: 0 !important;
      border-top-left-radius: 0 !important;
    }
  }
}

.use-icon {
  width: 32px;
  height: 32px;
}


.search-box-container {
  font-weight: 600;
  width: 80%;
  margin: auto;
  border-radius: 4px;
  background-color: var(--topbar-color);

  .search-box {
    padding: 24px 32px 20px;

    .header {
      margin-bottom: 10px;
      @media @mobile, @tablet {
        row-gap: 10px;
      }
      @media @mobile {
        flex-wrap: wrap;
      }
    }

    .input {

      .ant-input-affix-wrapper {
        background-color: white !important;
        color: var(--interact-color);
      }

      .search-input {
        background-color: white;
        color: var(--interact-color);
        font-weight: 600;
        font-size: 18px;
      }
    }

    .search-label {
      font-size: 24px;
    }
  }

  .apply-filters {
    margin-top: 10px;
    width: 400px;
  }
}

.add-to-group {
  font-size: 24px;
}

.spawned-timer {
  color: var(--primary-color);
}

.played-timer {
  color: var(--highlight-color);
}

.paginator {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.results {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .compact-node {
    flex: 1 0 20%;
  }

  .ant-card {
    max-width: 475px;
    margin: 4px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
  }

  .ant-card-loading {
    width: 475px;
    @media only screen and (max-width: 600px) {
      width: 85vw;
    }
  }
}

.card-title {
  display: flex;
  align-items: center;
}

.node-type {
  width: 32px;
}

.folklore {
  width: 32px;
  border-radius: 50%;
}

.material-icons {
  font-size: 24px;
}

.create-alarm {
  &.disabled {
    opacity: .5;

    &:hover {
      cursor: default;
      color: inherit;
    }
  }
}

.intro {
  padding: 100px 100px 0;
  text-align: center;
  font-size: 24px;
  opacity: .8;
}

.gig-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
