// DESTINATION: icons (@armor/icons)

.ico.ico-xl {
  font-size: 2.75em;
}
.ico.ico-lg {
  font-size: 1.2em;
}

.ico.ico-sm {
  font-size: 0.5rem;
}

.ico-left {
  display: block;
  float: left;
  margin-right: 0.5rem;
  margin-top: 0.25rem;
}

.ico-right {
  display: block;
  float: right;
  margin-left: 0.5rem;
  margin-top: 0.25rem;
}

.fa {
  @extend .ico;
}

.fa-chevron-left {
  @extend .ico-chevron-left;
}

.fa-chevron-right {
  @extend .ico-chevron-right;
}

.ico.ico-2x {
  font-size: 2rem;
}

.ico.ico-md {
  font-size: rem(20);
}

.ico-paperclip:before {
  transform: rotate(57deg);
  transform-origin: 11px 7px;
  position: relative;
  bottom: 2px;
}


os-icon {

  .btn-link {
    color: $gray-500;
    margin: 0 1.8rem;
    padding: 0;

    &:hover {
      color: $gray-850;
      cursor: pointer;
    }
  }

  .btn {
    i {
      color: $gray-500;
      padding: 0;

      &.ico {
        font-size: 1.65rem;
      }
    }
  }
}

td os-icon {
  display: inline-block;
  margin-top: -0.4375rem;
  margin-bottom: -0.875rem;
  position: relative;
  top: 2px;
}

td > expandable-row-trigger {
  display: inline-block;
  margin-bottom: -0.5rem;
}

.table.compact [expandablerow] os-icon {
  margin-bottom: -0.5625rem;
  margin-top: 0;

  .btn-link i {
    font-size: 1rem;
  }
}
