/*

#############################
### ATOM: component-frame ###
#############################

A simple border and component flag for responsive images. A title attribute is required for rendering the flag text.

### MODIFIERS:

format modifiers for differen color rendering (e.g. websites -> blue border, ads -> purple border). Default is blue

*/

@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import 'components/atoms/_text.scss';
@import 'components/atoms/_color.scss';

@mixin component-frame {

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: -3px;
    top: -3px;
    border: 3px solid color('robins-egg');

    @media (min-width: 768px) {
      left: -4px;
      top: -4px;
      border-width: 4px;
    }

    @media (min-width: 1024px) {
      left: -5px;
      top: -5px;
      border-width: 5px;
    }
  }

  &:after {
    @include txt;
    @include txt-mono;
    @include txt-strong;
    @include color-white;
    content: attr(title);
    position: absolute;
    left: -3px;
    bottom: 100%;
    padding: 3px 6px;
    font-size: 8px;
    background-color: color('robins-egg');

    @media (min-width: 768px) {
      left: -4px;
      padding: 5px 10px;
      font-size: 1.25vw;
    }

    @media (min-width: 1024px) {
      left: -5px;
    }

    @media (min-width: 1280px) {
      font-size: inherit;
    }
  }
}

@mixin component-frame-websites {
  &:before { border-color: color('robins-egg'); }
  &:after { @include gradient-websites; }
}

@mixin component-frame-stories {
  &:before { border-color: color('school-bus'); }
  &:after { @include gradient-stories; }
}

@mixin component-frame-ads {
  &:before { border-color: color('lav-magenta'); }
  &:after { @include gradient-ads; }
}

@mixin component-frame-email {
  &:before { border-color: color('confetti'); }
  &:after { @include gradient-e-mails; }
}
