@use "../../../../styles/font" as *;
@use "../../../../styles/variables" as *;

.visits-chart {
  display: flex;
  height: 252px;
  flex-direction: column;

  @media (min-width: 1280px) and (max-width: $xxl) {
    height: 280px;
  }

  &__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  &__title {
    font-size: 20px;
    font-weight: $fw-lighter;
    margin: 0;
    line-height: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;

    &-info {
      align-items: center;
      display: flex;
      min-height: 96px;
      justify-content: space-between;

      &-title {
        margin: 0;
        font-weight: $fw-normal;
        font-size: $fs-large;
        line-height: 1.5;
        letter-spacing: 0.15px;
        color: $dark-grey;
      }

      &-chart {
        margin-left: 16px;
      }
    }

    &-stats {
      display: flex;
      justify-content: space-between;

      &-title {
        margin:0;
        color: $light-grey;
        font-weight: $fw-lighter;
        font-size: 12px;
      }

      &-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &-data {
        margin:0;
        line-height: 1.5;
        font-weight: $fw-lighter;
        font-size: $fs-normal;
        color: $dark-grey;
      }

      &-icon {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        margin-left: 8px;
      }
    }
  }
}

.blue {
  background-color: $blue;
}

.yellow {
  background-color: $yellow;
}

.green {
  background-color: $green;
}
