/*------------------------------------*\
    #Flag
\*------------------------------------*/


.component-flag {
  background: @default;
  border-color: @default;
  display: inline-block;
  line-height: 1em;
  padding: .25em 1em;
  position: relative;
  margin: @padding-base-vertical @padding-base-horizontal;

  &:after, &:before {
    content: "";
    display: block;
    top:   1.5em;
    width:  0;
    height: 0;
    position: absolute;
    border-width: .75em .5em;
    border-style: solid;
    border-color: darken(@default, 5%);
    z-index:-1;
  }

  &:after {
    top:  .25em;
    right: 0;
    margin-right: -.75em;
    border-right-color: transparent;
  }

  &:before {
    top:  .25em;
    left: 0;
    margin-left: -.75em;
    border-left-color: transparent;
  }
  &.small {
    font-size:@font-size-small;
  }
  &.large, &.extra-large {
    font-size:@font-size-large;
  }
}
.flag-variant(@background) {
  color:#fff;
  background-color: @background;
  border: @background;
  &:after {
    border-color: darken(@background, 5%);
    border-right-color: transparent;
  }
  &:before {
    border-color: darken(@background, 5%);
    border-left-color: transparent;
  }
}

.component-flag {
  .flag-variant(@default);
  color: @btn-default-color;
  &.default {
    .flag-variant(@default);
  }
  &.primary {
    .flag-variant(@primary);
  }
  &.success {
    .flag-variant(@success);
  }
  &.info {
    .flag-variant(@info);
  }
  &.warning {
    .flag-variant(@warning);
  }
  &.danger {
    .flag-variant(@danger);
  }
}

//
// == Position ==
//

.component-flag {


  // Mixins
  .position-variant {
    position: absolute;
    top:    0;
    bottom: auto;
  }

  .flag-wrap {
    content: "";
    display: block;
    width:  0;
    height: 0;
    position: absolute;
    z-index: -1;
    border-width: .25em;
    top:   1.5em;
  }

  .flag-end {
    top:0;
    z-index:0;
    border-color: inherit;
  }

  // Right
  &.right {
    .position-variant;
    right: 0;
    margin-right: -.5em;
    &:after {
      .flag-wrap;
      right: 0;
      margin-top:  -1px;
      margin-right: 0;
      border-right-color: transparent;
      border-bottom-color: transparent;
    }
    &:before {
      .flag-end;
      border-left-color: transparent;
    }
  }

  // Left
  &.left {
    .position-variant;
    left: 0;
    margin-left: -.5em;
    &:before {
      .flag-wrap;
      left:  0;
      margin-top:  -1px;
      margin-left: 0;
      border-left-color: transparent;
      border-bottom-color: transparent;
    }
    &:after {
      .flag-end;
      border-right-color: transparent;
    }
  }

  // Bottom
  &.bottom {
    top:    auto;
    bottom: 0;
  }
}