/*
 * Copyright (c) 2023 Thomas Hansen - For license inquiries you can contact thomas@ainiro.io.
 */

@import "src/assets/styles/_variables/sizing.scss";

.action-btn {
  button {
    width: 18px;
    height: 18px;
    line-height: 18px;
  }

  mat-icon {
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 15px;
  }
}

@keyframes flash {
  0% {
    background-color: rgba(255, 255, 128);
  }

  100% {
    background-color: white;
  }
}

.active {
  animation-name: flash;
  animation-duration: 2s;
}

.masonry {
  width: 100%;
  -webkit-column-gap: $ainiro_gutter_x;
  -moz-column-count: 3;
  -moz-column-gap: $ainiro_gutter_x;
  column-count: 3;
  column-gap: $ainiro_gutter_x;

  .grid {
    -webkit-column-break-inside: avoid-column;
    -moz-column-break-inside: avoid-column;
    break-inside: avoid;

    .hoverable-row p {
      margin-left: 15px;
    }

    .divider {
      border-top: solid 1px rgba(0,0,0,.1);
    }

    .small {
      font-size: 11px;
      word-break: break-all;
    }

    .table-title {
      max-width: 80%;
      word-break: break-all;
    }

    .table-icons {
      mat-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        margin-right: 2px;
        vertical-align: bottom;
        position: absolute;
        left: 18px;

        &.flipped {
          transform: rotate(90deg);
        }
      }
    }
  }

  @media (min-width: 680px) and (max-width: 1100px) {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  @media (max-width: 679px) {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
