@import 'scss/font-family.scss';
@import 'theme/variables.scss';


.progress-expiration {
  gap: 6px;

  p {
    margin: 0;
    padding: 0;
  }

  &-header {
    .header-left-side {
      gap: 4px;

      .title {
        font-weight: 400 !important;
        font-family: $font-family;
        color: $ta-black-2;
        font-size: 14px;
        line-height: 18px;

        &.dark {
          color: $ta-black-3;
        }
      }

      .days {
        font-weight: 600 !important;
        color: $ta-black;
        font-size: 14px;
        line-height: 18px;
      }
    }

    .expires-time-date {
      font-family: $font-family;
      color: $muted;
      font-size: 14px;
      line-height: 18px;
      text-align: right;

      &.location{
        color: $ta-black-2;
      }
    }
  }

  &-container {
    width: 100%;
    height: 8px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;

    &.big {
      height: 24px;
    }

    .line {
      height: 100%;
    }
  }
}