.stock-app {

  padding: 0;

  .table {
    td:first-child {
      // product description inside the product column
      p {
        margin-bottom: 0;
      }
    }
  }

  #search {
    .search-input {
      box-shadow: none;
      border: $gray-light 1px solid;
      background-color: white;
      min-height: 35px;
      outline: none;
      border-radius: 0;
    }
    .alert-box {
      padding-top: 28px;
      position: fixed;
      right: 5px;
      top: 40px;
      z-index: 502; // above header toolbar
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
  }

  #filters-container {
    .collapse-button {
      width: 100%;
      text-align: left;
      .material-icons {
        vertical-align: bottom;
        font-size: 20px;
        color: $gray-medium;
      }
    }

    .filter-container {
      border: $gray-light 1px solid;
      padding: 10px;

      &.filter-suppliers {
        .item {
          margin-bottom: 5px;
        }

        ul {
          list-style: none;
          padding-left: 0;
          margin-bottom: 0;
        }
      }
    }
  }

  .low-filter-label {
    cursor: pointer;
  }

  #filters {
    background: white;
    border-radius: 2px;
    box-shadow: 1px 2px 3px 0 rgba(108, 134, 142, 0.3);
    border: solid 1px #b9cdd2;
    width: 150%;

    .row {
      padding: 0.625rem; // 10px
    }
  }

  // form that allows changing stock quantities
  form.qty {
    position: relative;
    display: inline-block;
    width: 7rem;

    &:hover,
    &.active {
      input[type=number] {
        // we need this offset to make room for the confirmation button
        padding-right: 34px;
      }

      .ps-number-spinner {
        right: 34px;
      }
    }

    .check-button {
      outline: none;
      opacity: 0;
      position: absolute;
      top: 1px;
      right: 1px;
      border: none;
      height: 33px;
      width: 33px;
      background: $brand-primary;
      z-index: 2;
      padding: 0;
      cursor: pointer;
      .material-icons {
        color: white;
        vertical-align: middle;
      }
      &:hover {
        background: $primary-hover;
      }
    }

    &.active {
      .check-button {
        opacity: 1;
        cursor: pointer;
      }
    }

    &.disabled {
      .check-button {
        background: $gray-light;
        cursor: default;
      }
    }

  }

  .pagination {
    justify-content: center;
  }

  .stock-movements {
    .qty-number {
      padding: 2px 5px;
      background-color: $gray-dark;
      display: inline-block;
      min-width: 50px;
      color: white;
      &.is-positive {
        background-color: $brand-primary;
      }
    }
  }

  .stock-overview {
    .table {
      table-layout: fixed;

      thead {
        th {
          &.product-title {
            padding-left: 6rem;
          }
          &:last-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .material-icons {
              margin-right: 5px;
            }
          }
        }
      }

      .qty-update {
        color: $brand-primary;
        .material-icons {
          vertical-align: middle;
        }
      }
      .enable {
        color: $success;
      }
      .disable {
        color: $danger;
      }
      .low-stock {
        background: $danger-hover;
        .stock-warning {
          color: $danger;
          font-weight: bold;
          &.ico {
            border: 1px solid $danger;
            background: lighten($danger, 30%);
            padding: 0 5px;
            cursor: pointer;
          }
        }
      }
    }

    .product-actions {
      small {
        display: block;
      }
      .bulk-qty {
        max-width: 100px;
      }
      .update-qty {
        color: white;
        transition: background-color 0.2s ease;
      }
      .qty {
        padding-left: 20px;
      }
    }
  }
}