/*
Component represents a timer (attraction for landing visitor).
Use:
  <div class="top-timer style-secondary">
    <div class="top-timer-content">
      <p class="top-timer-text">до старта 28 часов, успей забрать со скидкой</p>
      <p class="top-timer-title">КОНСУЛЬТАЦИЯ</p>
    </div>

    <img class="top-timer-avatar" src="...">
  </div>
*/

@use '../mixins/styles.scss';
@use '../mixins/flex.scss';

$width: 40px;
$height: 40px;
$border-thickness: 4px;
.top-timer {
  @include flex.row;

  height: $height;

  background: none;
  color: inherit;

  // Styles
  &.style-primary {
    .top-timer-title {
      background: var(--color-primary);
      color: var(--color-primary-text);
    }
    .top-timer-avatar {
      border-color: var(--color-primary);
    }
  }
  &.style-secondary {
    .top-timer-title {
      background: var(--color-secondary);
      color: var(--color-secondary-text);
    }
    .top-timer-avatar {
      border-color: var(--color-secondary);
    }
  }

  // Content
  .top-timer-content {
    height: 100%;
    width: max-content;

    padding: var(--unit-1);
    padding-left: var(--unit-3);

    margin-right: var(--unit-2);

    @include flex.row;
    @include flex.centering;

    background: var(--color-light);

    border-radius: var(--radius-4);

    .top-timer-text {
      margin-right: var(--unit-2);

      font-size: var(--font-size-3);
      color: var(--color-light-text);
    }
    .top-timer-title {
      padding: var(--unit-1) var(--unit-3);

      font-size: var(--font-size-2);
      text-transform: uppercase;

      border-radius: var(--radius-4);
    }
  }
  // Avatar
  .top-timer-avatar {
    width: $width;
    height: $height;

    border-width: $border-thickness;
    border-style: solid;
    border-radius: var(--radius-5);
  }
}