/// mixin to set sticky area on bottom when scrolling
@mixin sticky-bottom {
    position: sticky;
    bottom: 0;
    margin-top: 4em;
    z-index: 1000;
}

ul.record_actions {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-end;
   padding: 0.5em 0;

    &.inline {
        display: inline-block;
    }

    &.slim {
        margin-bottom: 0;
    }

   &.column {
      flex-direction: column;
   }

   &.left {
      justify-content: flex-start;
   }

   &.sticky-form-buttons {
      padding-left: 1em;
      padding-right: 1em;
   }

    &.small {
        .btn {
            padding: .25rem .5rem;
            font-size: .75rem;
        }
    }

   li {
      display: inline-block;
      list-style-type: none;
      margin-right: 1em;
      order: 99;

      &:last-child {
         margin-right: 0;
      }

      &.cancel {
         order: 1;
         margin-right: auto;
      }
   }

   ul.dropdown-menu {
      z-index: 2000;
      li {
         display: block;
         margin-right: 0;
      }
   }
}

.sticky-form {
    background-color: $white;
    padding-top: 1.25em;
    margin: -1em;
    box-shadow: 0 -20px 20px -20px rgba($chill-gray, .5);
    @include sticky-bottom;

    .sticky-form-buttons {
        position: initial;
        bottom: unset;
        margin-top: unset;
        z-index: unset;
    }
}

.sticky-form-buttons {
    display: flex;
    background-color: $beige;
    text-align: center;
    padding: 0.8em 1.6em;
    border-radius: 0;
    @include sticky-bottom;
    bottom: 0.3em;
}

/// EXCEPTIONS
// inside table exceptions
table {
   td ul.record_actions,
   ul.record_actions_small {
      li {
         margin-right: 0.2em;
      }
   }
   ul.record_actions {
      margin: 0;
      padding: 0.5em;
   }
}

// inside alert exceptions
div.alert.alert-with-actions {
   display: flex;
   flex-direction: row;

   ul.record_actions {
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0;

      li:nth-child(1n+2) {
         margin-top: 0.5rem;
      }

      li {
         margin-right: 0;
      }
   }

   @media screen and (max-width: 1050px) {
      flex-direction: column;

      ul.record_actions {
         margin-top: 1rem;
         text-align: center;
      }
   }
}
