/* Top line theme
 */

/* Theme
 */

%theme-topline {

  background: #fff;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: emCalc(30);

    background-color: #000;
  }

  .card-content {

    .card-picture {
      position: absolute;
      top: 8%;
      left: 4%;
    }

    .card-item,
    .card-item p {
      position: relative;
    }

    .card-item {
      position: absolute;
      left: 52%;
    }


    .person,
    .details,
    .email,
    .url {
      position: absolute;

      width: emCalc(160);
    }

    .person {
      top: 8%;
    }

    .details {
      top: 38%;
    }

    .email {
      top: 74%;
    }

    .url {
      top: 84%;
    }

    .email,
    .url {
      color: #000;
    }

  }

}

%theme-topline-thumb {

  .theme-preview {
    position: relative;
    background-color: #fff;
    padding: 0 !important;
  }

  .theme-preview:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-width: emCalc(12) 0 0;
    border-style: solid;
    border-color: #000;
    background: transparent;
  }

}

/* Mixin
 */

@mixin topline($name, $color, $dark: false) {

  .theme-topline--#{$name} {
    @extend %theme-topline;

    @include theme(light);

    &:before {
      background: $color;
    }

    .card-content {
      .email,
      .url {
        color: $color;
      }
    }
  }

  .theme-topline--#{$name}-thumb {
    @extend %theme-topline-thumb;

    .theme-preview:after {
      border-color: $color;
    }
  }

}

/* Sub-themes
 */

@include topline('black', #000);
@include topline('blue', #00A6DE);
@include topline('dark-blue', #133B8B);
@include topline('red', #ED1C24);
@include topline('turquoise', #1ABC9C);
@include topline('green', #8DC63F);
@include topline('dark-green', #00723F);
@include topline('pink', #E8A0C6);
@include topline('purple', #713F64);
@include topline('orange', #F58220);