@import '../../global-sass-files/variables';
@import '../../global-sass-files/mixins';
@import '../../global-sass-files/grid';

// Button
.button {
  position: relative;
  border: none;
  outline: none;
  font-size: 12px;
  color: $white-color;
  text-align: center;
  font-family: $primary-font-regular;
  padding: 8px 34px;
  cursor: pointer;
  line-height: 17px;
  &.linear {
    @include border-radius(15px);
  }
  &.squared {
    border-radius: 3px;
    padding: 6px;
  }
  &.normal {
    border-radius: 0;
    padding: 5px 25px;
  }
  // &.small {

  // }
  // &.medium {

  // }
  // &.big {

  // }
  // Regular button
  &-regular {
    &-orange {
      background-color: $content-orange-color;
    }
    &-green {
      background-color: $content-green-color;
    }
    &-blue {
      background-color: $content-blue-color;
    }
    &-red {
      background-color: $content-red-color;
    }
    &-gray {
      background-color: $content-gray-color;
    }
  }
  // Bordered button
  &-bordered {
    background-color: transparent;
    padding: 7px 28px;
    @media (max-width: 576px) {
      padding: 6px 22px;
    }
    &-black {
      color: #373737;
      border: 1px solid #3e3e3e;
      background-color: transparent;
    }
    &-orange {
      color: $content-orange-color;
      border: 1px solid $content-orange-color;
      background-color: transparent;
    }
    &-green {
      color: $content-green-color;
      border: 1px solid $content-green-color;
      background-color: transparent;
      &:hover {
        color: $white-color;
        background-color: #88b917;
      }
    }
    &-blue {
      color: $content-blue-color;
      border: 1px solid $content-blue-color;
      color: $content-blue-color;
      background-color: transparent;
    }
    &-red {
      color: $content-red-color;
      border: 1px solid $content-red-color;
      background-color: transparent;
    }
    &-gray {
      color: $content-gray-color;
      border: 1px solid $content-gray-color;
      background-color: transparent;
    }
    &-white {
      border: 1px solid $white-color;
      background-color: transparent;
    }
  }
  &-validate {
    &-blue {
      background-color: #009fdf;
    }
    &-red {
      background-color: $content-red-color;
    }
    &-green {
      background-color: $lime-centreon-primary;
    }
  }
  .icon-action-clock {
    &:before {
      content: '';
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #88bd23;
      bottom: 2px;
      left: 4px;
    }
  }
  &.icon {
    padding: 2px 14px;
    border-radius: 2px;
    > span {
     position: static;
     transform: none;
     font-size: 20px;
    }
  }
  &-card-position {
    position: absolute;
    bottom: 20px;
  }
}