@import "src/assets/scss/variables";

:root {
  --filter-number-color: var(--secondary-color);
  }
  
  :root[data-theme="dark"] {
    --filter-number-color: var(--text-color);
  }
  
.alternative-box{
  background-color: $quick-access-background;
  box-shadow: 0px 3px 6px #00000029;
  padding: 2rem 1.5rem;
height: 100%;

  .rescom-alternative-box-title {
    display: flex;
    align-items: flex-end;
    margin-bottom: 2.7rem;

    .rescom-alternative-box-title-text {
      margin-left: 3.2rem;
      margin: 0rem 2.8rem 0rem 3.7rem;
      font-size: 1.8rem;
      font-weight: 900;
      color: $title-color;
    }
  }

  .filters-container {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.8rem;

    .filter-box {
      background-color: $app-background;
      padding: 0.6rem 1.4rem 1rem 1.4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .filter-box-left {
        display: flex;
        align-items: flex-end;

        .filter-number {
          color: var( --filter-number-color);
          font-size: 2rem;
          width: 2.5rem;
        }

        .filter-p {
          margin-left: 2rem;
          color: $title-color;
          font-size: 1.6rem;
          font-weight: 500;
        }
      }

      .rescom-box-arrow {
        transform: rotate(270deg);
      }
    }
  }
}