/**
* @fileoverview: Console Art Cybernetic badges placeholders stylesheet.
* @project: Console Art Cybernetic - https://cacybernetic.github.io
* @author: Obrymec - obrymecsprinces@gmail.com
* @supported: DESKTOP, MOBILE
* @file: placeholders.scss
* @created: 2023-07-13
* @updated: 2023-09-28
* @version: 0.0.2
*/

// Dependencies.
@import "./_variables.scss";

// Buttons design.
%badges-btn-design {
  color: $badges-bg-color;
  align-items: center;
  border-radius: 4px;
  font-weight: 600;
  column-gap: 7px;
  display: flex;
  padding: 16px;
  width: 360px;
  border: none;
  // From 770 to 0.
  @media #{$badges-770} {
    width: 100%;
  }
}

// Learn more button.
%badges-lm-btn {
  background-color: $badges-intial-text-color;
  border: 1px solid $badges-intial-text-color;
  border-radius: 4px;
  // Hover effect.
  &:hover {
    background-color: $badges-bg-color;
    // Text.
    span {
      color: $badges-intial-text-color;
    }
    // Right arrow.
    img {
      filter: brightness(300%);
    }
  }
  // Text.
  span {
    color: $badges-bg-color;
  }
  // Right arrow.
  img {
    transform: translateY(2px);
    filter: brightness(1%);
  }
}
