@import '../../../../globals/mixins';
@import '../../../../globals/variables';

.icon-text-stat {
  align-items: flex-start;
  display: flex;
  padding: 1.5rem;
  transition: all 0.2s ease;

  &-checkbox {
    height: 1.5rem;
    margin-right: 1.5rem;
    width: 1.5rem;

    input[type='checkbox'] {
      appearance: none;
      border: 2px solid $ads-default-icon-dark;
      border-radius: 5px;
      cursor: pointer;
      height: 1.5rem;
      position: relative;
      width: 1.5rem;
    }

    input[type='checkbox']:checked {
      background-color: $ads-default-icon-dark;
    }

    input[type='checkbox']:checked::after {
      color: $ads-color-main;
      content: '✔';
      font-size: 16px;
      left: 3px;
      position: absolute;
      top: -2px;
    }
  }

  &-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 3rem;
    justify-content: center;
    margin-right: 1rem;
    transition: all 0.2s ease;
    width: 3rem;
  }

  &-text {
    color: $ads-icontextstat-color-text;
    flex: 1;
    font-family: sans-serif;
    font-weight: 300;

    &.small {
      font-size: $ads-icontextstat-fontsize-smalltext;
    }

    &.medium {
      font-size: $ads-icontextstat-fontsize-mediumtext;
    }

    &.large {
      font-size: $ads-icontextstat-fontsize-largetext;
    }
  }

  &-title {
    color: $ads-icontextstat-color-title;
    font-weight: 500;
    margin: 0;
    margin-bottom: 1rem;

    &.small {
      font-size: $ads-icontextstat-fontsize-smalltitle;
    }

    &.medium {
      font-size: $ads-icontextstat-fontsize-mediumtitle;
    }

    &.large {
      font-size: $ads-icontextstat-fontsize-largetitle;
    }
  }

  &-sub-value {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  &.secondary {
    .icon-text-stat-icon {
      background-color: $ads-secondary-twenty-five;
      color: $ads-secondary-main;
    }
  }

  &.tertiary {
    .icon-text-stat-icon {
      background-color: $ads-tertiary-twenty-five;
      color: $ads-tertiary-main;
    }
  }

  &.warning {
    .icon-text-stat-icon {
      background-color: $ads-warning-twenty-five;
      color: $ads-warning-main;
    }
  }

  &.success {
    .icon-text-stat-icon {
      background-color: $ads-success-twenty-five;
      color: $ads-success-main;
    }
  }

  &.error {
    .icon-text-stat-icon {
      background-color: $ads-danger-twenty-five;
      color: $ads-danger-main;
    }
  }

  &.primary {
    .icon-text-stat-icon {
      background-color: $ads-primary-twenty-five;
      color: $ads-primary-main;
    }
  }

  &.secondary:hover {
    background-color: $ads-secondary-twenty-five;

    .icon-text-stat-icon {
      background-color: $ads-secondary-main;
      color: $ads-color-main;
    }
  }

  &.tertiary:hover {
    background-color: $ads-tertiary-twenty-five;

    .icon-text-stat-icon {
      background-color: $ads-tertiary-main;
      color: $ads-color-main;
    }
  }

  &.warning:hover {
    background-color: $ads-warning-twenty-five;

    .icon-text-stat-icon {
      background-color: $ads-warning-main;
      color: $ads-color-main;
    }
  }

  &.success:hover {
    background-color: $ads-success-twenty-five;

    .icon-text-stat-icon {
      background-color: $ads-success-main;
      color: $ads-color-main;
    }
  }

  &.error:hover {
    background-color: $ads-danger-twenty-five;

    .icon-text-stat-icon {
      background-color: $ads-danger-main;
      color: $ads-color-main;
    }
  }

  &.primary:hover {
    background-color: $ads-primary-twenty-five;

    .icon-text-stat-icon {
      background-color: $ads-primary-main;
      color: $ads-color-main;
    }
  }

  &.sharp {
    border-radius: 0;
  }

  &.soft {
    border-radius: 0.5rem;
  }

  @include respond-to('medium') {
    width: 34.625rem;
  }
}
