//=================
//helper classes
//=================
.clickable {
  cursor: pointer;
}

//=================
//font classes
//=================
.font-bold {
  font-weight: 600;
}

.font-size-small {
  font-size: @font-size-sm;
}

//================
//text alignment
//================
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

//================
//background-color
//================
.navigation-white-bg {
  background-color: @white !important;
}

.listview-document-th {
  width: 35px;
}

.listview-document-bg {
  color: darken(@grey4, 10%);
  background-color: @listview-document-bg;
}

//=================
//margin classes
//=================
// --- 4 sides
//nill - 0 - no margin
.m-nil {
  .m-t-nil();
  .m-r-nil();
  .m-b-nil();
  .m-l-nil();
}

//EXTRA extra small
.m-xxs {
  .m-t-xxs();
  .m-r-xxs();
  .m-b-xxs();
  .m-l-xxs();
}

// extra small
.m-xs {
  .m-t-xs();
  .m-r-xs();
  .m-b-xs();
  .m-l-xs();
}

//small margin
.m-sm {
  .m-t-sm();
  .m-r-sm();
  .m-b-sm();
  .m-l-sm();
}

//normal margin
.m {
  .m-t();
  .m-r();
  .m-b();
  .m-l();
}

//medium margin
.m-md {
  .m-t-md();
  .m-r-md();
  .m-b-md();
  .m-l-md();
}

//large margin
.m-lg {
  .m-t-lg();
  .m-r-lg();
  .m-b-lg();
  .m-l-lg();
}

//extra large margin
.m-xl {
  .m-t-xl();
  .m-r-xl();
  .m-b-xl();
  .m-l-xl();
}

// --- individual sides
//nill - 0 - no margin
.m-t-nil {
  margin-top: @spacing-nil;
}

.m-r-nil {
  margin-right: @spacing-nil;
}

.m-b-nil {
  margin-bottom: @spacing-nil;
}

.m-l-nil {
  margin-left: @spacing-nil;
}

//EXTRA extra small
.m-t-xxs {
  margin-top: @spacing-xxsTopBottom;
}

.m-r-xxs {
  margin-right: @spacing-xxsRightLeft;
}

.m-b-xxs {
  margin-bottom: @spacing-xxsTopBottom;
}

.m-l-xxs {
  margin-left: @spacing-xxsRightLeft;
}

//extra small
.m-t-xs {
  margin-top: @spacing-xs;
}

.m-r-xs {
  margin-right: @spacing-xs;
}

.m-b-xs {
  margin-bottom: @spacing-xs;
}

.m-l-xs {
  margin-left: @spacing-xs;
}

//small margin
.m-t-sm {
  margin-top: @spacing-sm;
}

.m-r-sm {
  margin-right: @spacing-sm !important;
}

.m-b-sm {
  margin-bottom: @spacing-sm;
}

.m-l-sm {
  margin-left: @spacing-sm;
}

//normal margin
.m-t {
  margin-top: @spacing;
}

.m-r {
  margin-right: @spacing;
}

.m-b {
  margin-bottom: @spacing;
}

.m-l {
  margin-left: @spacing;
}

//medium margin
.m-t-md {
  margin-top: @spacing-md;
}

.m-r-md {
  margin-right: @spacing-md;
}

.m-b-md {
  margin-bottom: @spacing-md;
}

.m-l-md {
  margin-left: @spacing-md;
}

//large margin
.m-t-lg {
  margin-top: @spacing-lg;
}

.m-r-lg {
  margin-right: @spacing-lg;
}

.m-b-lg {
  margin-bottom: @spacing-lg;
}

.m-l-lg {
  margin-left: @spacing-lg;
}

//extra large margin
.m-t-xl {
  margin-top: @spacing-xl;
}

.m-r-xl {
  margin-right: @spacing-xl;
}

.m-b-xl {
  margin-bottom: @spacing-xl;
}

.m-l-xl {
  margin-left: @spacing-xl;
}

//=================
//padding classes
//=================
// --- 4 sides
//nill - 0 - no padding
.p-nil {
  .p-t-nil();
  .p-r-nil();
  .p-b-nil();
  .p-l-nil();
}

//EXTRA extra small
.p-xxs {
  .p-t-xxs();
  .p-r-xxs();
  .p-b-xxs();
  .p-l-xxs();
}

// extra small
.p-xs {
  .p-t-xs();
  .p-r-xs();
  .p-b-xs();
  .p-l-xs();
}

//small padding
.p-sm {
  .p-t-sm();
  .p-r-sm();
  .p-b-sm();
  .p-l-sm();
}

//normal padding
.p {
  .p-t();
  .p-r();
  .p-b();
  .p-l();
}

//medium padding
.p-md {
  .p-t-md();
  .p-r-md();
  .p-b-md();
  .p-l-md();
}

//large padding
.p-lg {
  .p-t-lg();
  .p-r-lg();
  .p-b-lg();
  .p-l-lg();
}

//extra large padding
.p-xl {
  .p-t-xl();
  .p-r-xl();
  .p-b-xl();
  .p-l-xl();
}

// --- individual sides
//nill - 0 - no padding
.p-t-nil {
  padding-top: @spacing-nil;
}

.p-r-nil {
  padding-right: @spacing-nil;
}

.p-b-nil {
  padding-bottom: @spacing-nil;
}

.p-l-nil {
  padding-left: @spacing-nil;
}

//EXTRA extra small
.p-t-xxs {
  padding-top: @spacing-xxsTopBottom;
}

.p-r-xxs {
  padding-right: @spacing-xxsRightLeft;
}

.p-b-xxs {
  padding-bottom: @spacing-xxsTopBottom;
}

.p-l-xxs {
  padding-left: @spacing-xxsRightLeft;
}

.p-t-xs {
  padding-top: @spacing-xs;
}

.p-r-xs {
  padding-right: @spacing-xs;
}

.p-b-xs {
  padding-bottom: @spacing-xs;
}

.p-l-xs {
  padding-left: @spacing-xs;
}

//small padding
.p-t-sm {
  padding-top: @spacing-sm;
}

.p-r-sm {
  padding-right: @spacing-sm;
}

.p-b-sm {
  padding-bottom: @spacing-sm;
}

.p-l-sm {
  padding-left: @spacing-sm;
}

//normal padding
.p-t {
  padding-top: @spacing;
}

.p-r {
  padding-right: @spacing;
}

.p-b {
  padding-bottom: @spacing;
}

.p-l {
  padding-left: @spacing;
}

//medium padding
.p-t-md {
  padding-top: @spacing-md;
}

.p-r-md {
  padding-right: @spacing-md;
}

.p-b-md {
  padding-bottom: @spacing-md;
}

.p-l-md {
  padding-left: @spacing-md;
}

//large padding
.p-t-lg {
  padding-top: @spacing-lg;
}

.p-r-lg {
  padding-right: @spacing-lg;
}

.p-b-lg {
  padding-bottom: @spacing-lg;
}

.p-l-lg {
  padding-left: @spacing-lg;
}

//extra large padding
.p-t-xl {
  padding-top: @spacing-xl;
}

.p-r-xl {
  padding-right: @spacing-xl;
}

.p-b-xl {
  padding-bottom: @spacing-xl;
}

.p-l-xl {
  padding-left: @spacing-xl;
}

//===============
//Angular
//==============
[hidden],
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
  display: none !important;
}

ng\:form {
  display: block;
}

// Support Angular CDK Live Announcer
.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

// Support focus when cdk-keyboard-focus class is present
.ux-keyboard-focus {
  &:focus {
    &:not(.cdk-keyboard-focused) {
      outline: none;
    }

    &.cdk-keyboard-focused {
      .focus-outline();
    }
  }
}

// Support controlled focus using the uxFocus directive
.ux-focus-indicator {
  &:focus {
    &:not(.ux-focus-indicator-active) {
      outline: none;
    }

    &.ux-focus-indicator-active {
      .focus-outline();
    }
  }
}