@import '../../../../@theme/styles/variables';
@import '~@nebular/theme/styles/global/bootstrap/buttons';

@include nb-install-component() {

  nb-card-header {
    display: flex;

    span {
      flex: 1;
    }

    .dropdown {
      width: 30%;
    }
  }

  .example-container:nth-child(n + 4) {
    margin-top: 2rem;
  }

  .primary-container {
    .original {
      background-color: nb-theme(btn-primary-bg);
    }
    .hover {
      @include btn-primary-hover();
    }
    .active {
      @include btn-primary-active();
    }
  }

  .primary-container.outline .original {
    background-color: transparent;
    border: 2px solid nb-theme(btn-primary-bg);
  }

  .success-container {
    .original {
      background-color: nb-theme(btn-success-bg);
    }
    .hover {
      @include btn-success-hover();
    }
    .active {
      @include btn-success-active();
    }
  }

  .success-container.outline .original {
    background-color: transparent;
    border: 2px solid nb-theme(btn-success-bg);
  }

  .warning-container {
    .original {
      background-color: nb-theme(btn-warning-bg);
    }
    .hover {
      @include btn-warning-hover();
    }
    .active {
      @include btn-warning-active();
    }
  }

  .warning-container.outline .original {
    background-color: transparent;
    border: 2px solid nb-theme(btn-warning-bg);
  }

  .info-container {
    .original {
      background-color: nb-theme(btn-info-bg);
    }
    .hover {
      @include btn-info-hover();
    }
    .active {
      @include btn-info-active();
    }
  }

  .info-container.outline .original {
    background-color: transparent;
    border: 2px solid nb-theme(btn-info-bg);
  }

  .danger-container {
    .original {
      background-color: nb-theme(btn-danger-bg);
    }
    .hover {
      @include btn-danger-hover();
    }
    .active {
      @include btn-danger-active();
    }
  }

  .danger-container.outline .original {
    background-color: transparent;
    border: 2px solid nb-theme(btn-danger-bg);
  }

  .secondary-container {
    .original {
      border: 2px solid nb-theme(btn-secondary-border);
    }
    .hover {
      @include btn-secondary-hover();
    }
    .active {
      @include btn-secondary-active();
    }
  }

  .secondary-container.outline .original {
    background-color: transparent;
    border: 2px solid nb-theme(btn-secondary-border);
  }
}