@import "var";
@import "breakpoint-sass/stylesheets/breakpoint";
@import "mixins/typo";
@import "mixins/card";
@import "extend/misc";

:root {
  --arg-card-border-color : #{$arg-card-border-color};
  --arg-card-border-radius-size : #{$arg-card-border-radius-size};
  --arg-card-bg-color : #{$arg-card-bg-color};
  --arg-card-box-shadow : #{$arg-card-box-shadow};
  --arg-card-header-icon-bg-on-card : #{$arg-card-header-icon-bg-on-card};
  --arg-card-border-size: #{$arg-card-border-size};
  --arg-base-text-default-color: #000000;
  --arg-card-header-text-bot-color: #{$arg-card-metadata-color};
  --arg-card-metadata-color: #{$arg-card-metadata-color};
  --arg-card-max-width: #{$arg-card-max-width};
}

// Card first extend.
.card {
  @include rufi-card;

  &__image {
    @include rufi-card__image;
  }

  &__content-wrapper {
    @include rufi-card__content-wrapper;
  }

  &__metadata {
    @include rufi-card__metadata;
    @include arg-typo--subtitle2;
  }


  &__prevent_nesting .card {
    @include rufi-card__prevent_nesting;
  }
  &__prevent_nesting_top .card {
    @include rufi-card__prevent_nesting_top;
  }
}

.card-header {
  @include rufi-card-header;

  &__icon {
    @include rufi-card-header__icon;
    border-radius: 12%;

    &[data-type="problem"] {
      color: var(--rufi-guide-fill, $rufi-guide-fill);
      &:before {
        background-color: var(--rufi-guide-rule, $rufi-guide-problem);
      }
    }

    &[data-type="rule"] {
      color: var(--rufi-guide-fill, $rufi-guide-fill);
      &:before {
        background-color: var(--rufi-guide-rule, $rufi-guide-rule);
      }
    }

    &[data-type="rufi_pro"],
    &[data-type="rufi_con"] {
      color: var(--rufi-guide-fill, $rufi-guide-fill);
      &:before {
        background-color: var(--rufi-guide-rule, $rufi-guide-argument);
      }
    }
  }

  &__user-img {
    @include rufi-card-header__icon;
    border-radius: 3px;
    img {
      display: block;
    }
  }

  &__text {
    @include rufi-card-header__text;

    &__top {
      @include rufi-card-header__text__top;
      @include arg-typo--h6;
      a {
        @extend %link-next;
      }
    }

    &__bot {
      @include rufi-card-header__text__bot;
      @include arg-typo--subtitle2;
    }
  }

}

.card__content-item {
  @include rufi-card__content-item;

  &__row {
    @include rufi-card__content-item__row;
  }
}

.card__content-item__extend {
  @include card__content-item__extend;
}

.card__content-item__extend__toggle {
  @include card__content-item__extend__toggle;
}

.card-footer {
  @include rufi-card-footer;
  &__metadata {
    @include rufi-card__metadata;
  }
  &__action-buttons {
    @include rufi-card-footer__action-buttons;

    .drop-menu,
    .rufi-chip-set {
      margin: -.35rem .5rem -.35rem -.5rem;
    }
  }

  &__action-icons {
    @include rufi-card-footer__action-icons;

    .drop-menu,
    .rufi-chip-set {
      margin: -.35rem -.5rem -.35rem .5rem;
    }
  }
}

