@import "./license.css";

.page-toolbar {
  /* display: grid;
  grid-template-columns: 1fr 1fr 1fr; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-32);

  & .page-title {
    font-size: var(--font-18);
    font-weight: var(--font-weight-400);
    color: var(--grey-1);
    margin: 0;
  }

  & .search-field {
    display: grid;
    grid-template-columns: 30px auto 30px;
    justify-self: center;
    align-items: center;
    border: 1px solid var(--grey-4);
    background-color: var(--white);
    border-radius: 32px;
    max-width: 350px;
    overflow: hidden;

    & input {
      font-size: var(--font-12);
      font-weight: var(--font-weight-600);
      color: var(--grey-3);
      border: none;
      padding: var(--space-8);
      outline: none;
      border-radius: 0;
    }

    & .icon {
      font-size: var(--font-12);
      text-align: center;
      padding: var(--space-8);
      color: var(--grey-3);
    }
  }

  & .controls {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    justify-self: flex-end;

    & button {
      font-size: var(--font-12);
    }
  }
}

.page-toolbar-vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-32);

  .faq-tag {
    font-size: var(--font-10);
    font-weight: var(--font-weight-600);
    padding: var(--space-4) var(--space-8);
    background-color: var(--grey-4);
    border-radius: 6px;
    margin-bottom: var(--space-16);
  }

  .page-title {
    font-size: var(--font-24);
    font-weight: var(--font-weight-400);
    text-align: center;
    color: var(--grey-1);
    margin: 0;
    margin-bottom: var(--space-16);
  }

  .page-description {
    font-size: var(--font-16);
    font-weight: var(--font-weight-400);
    text-align: center;
    color: var(--grey-2);
    margin: 0;
    margin-bottom: var(--space-16);
  }
}

.status {
  font-size: var(--font-10);
  font-weight: var(--font-weight-600);
  color: var(--grey-1);
  text-align: center;
  background: var(--orange-1);
  border-radius: 12px;
  padding: 4px 8px 4px 8px;
  width: fit-content;
}

@media screen and (max-width: 959px) {
  .page-toolbar {
    grid-template-columns: auto auto;

    & .page-title {
      display: none;
    }

    & .search-field {
      justify-self: flex-start;
    }

    & .controls {
      justify-self: flex-end;
    }
  }
}