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

:root {
  --dashboard-hero: var(--attention-color);
--button-background: white;
}

:root[data-theme="dark"] {
  --dashboard-hero: #20262E;
  --button-background: #40474F;
}

.dashboardhero {
  min-height: 62px;
  border-radius: 5px;
  background: var(--dashboard-hero);
  padding: 16px;
  display: flex;
  align-items: center;
  @media (max-width: 875px) {
    height: unset;
    flex-wrap: wrap;
    gap: 20px 10px;
    .dua-info {
      flex: 100%;
      margin-right: unset;
      align-items: center;

      &:after {
        display: none;
      }

      &.last-of-type {
        //flex: 1 0 0;
      }
    }

    .dua-button {
      margin: unset !important;
    }
  }
  //@media (max-width: 750px) {
  //  .dua-info{
  //    flex: 100%;
  //  }
  //
  //}


  .dua-info {
    position: relative;
    margin-right: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 0;


    span {
      white-space: nowrap;
    }


    &--title {
      color: $white;
      font-size: 1.2rem;
      margin-right: 5px;
      line-height: 1;

    }

    &--content {
      color: $white;
      font-size: 1.8rem;
      font-weight: bold;
      line-height: 1;

    }

    &.with-icon {
      padding-left: 30px;
      position: relative;

      img {
        position: absolute;
        top: 0;
        left: 0;
      }

      @media (max-width: 875px) {

        padding-left: unset;
        padding-top: 40px;

      }
    }

    &.with-border:after {
      content: '';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      height: 34px;
      width: 1px;
      border-right: 1px dashed white;
    }

    @media (max-width: 1100px) {

      margin-right: 20px;
      flex-wrap: wrap;

      &:after {
        right: -10px !important;
      }

    }
  }

  .dua-button {



    a {
      background: var(--button-background);
      border-radius: 5px;
      height: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.1rem;
      color: $title-color;
      cursor: pointer;
      width: 190px;

      margin-right: 8px;
      @media (max-width: 1440px) {
        width: 155px;
      }
      &:hover{
        background-color: $main-color;
        color: $white;
      }
    }

    &:not(:last-child) {
      margin-left: auto;
    }


  }
}