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

:root {
  --info-box-text: var(--secondary-color);
  --backg:transparent;
  --border:#BCDDFB;
}


:root[data-theme="dark"] {

  --info-box-text: #ccc;
  --backg:#20262E;
  --border:#20262E;
}

.card-renew-box {
  background: var(--backg) ;
  width: 100%;
  min-height: 110px;
  border: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  height: 100%;

.action-btn {
  cursor: pointer;
}

.bg-orange {
  background-color: #E3AC16;
}

.bg-green {
  background-color: #61C765;
}

  &--left {

    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    height: 100%;
    padding: 3rem;

    p {
      color: white;
      font-weight: normal;
      font-size: 1.5rem;
    }

    .date-title {
        font-weight: 800;
        font-size: 1.6rem;
    }

    img {
      margin-top: 1.5rem;
    }

  }

  &--right {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background-color: #040059;
    height: 100%;
    padding: 3rem;
    align-items: center;

    p {
      color: white;
      font-weight: 800;
      font-size: 1rem;
    }

    img {
        background-color: white;
        background-color: #040059;
        width: 3.5rem;
        height: 3.5rem;
    }
  }
}