@use "../../../../../../global/theme/mixins/button";

app-slides-aside {
  position: relative;

  aside {
    display: flex;
    flex-direction: column;

    min-height: 100%;
    height: 100%;

    width: var(--slides-aside-width);

    padding: 16px 16px 48px;
    overflow: scroll;
    border-right: 1px solid #dedede;

    --preview-width: calc(var(--slides-aside-width) - 32px);

    &.drag {
      app-slide-thumbnail {
        transition: margin 0.25s ease-out, min-height 0.25s ease-in;
      }
    }

    app-slide-thumbnail {
      margin-bottom: 16px;

      transition: margin 0.15s ease-in;

      &.highlight {
        border: 1px solid var(--ion-color-dark);
        box-shadow: rgba(var(--ion-color-dark-rgb), 0.4) 0 1px 4px;
      }

      &.hover {
        margin-bottom: calc(var(--slides-aside-width) * 9 / 16);
      }

      &.hover-top {
        margin-top: calc(var(--slides-aside-width) * 9 / 16);
      }

      &.drag-start,
      &.drag-hover {
        visibility: hidden;
        opacity: 0;
      }

      &.drag-hover {
        min-height: 0;
        height: 0;
        border: none;
      }
    }
  }

  div.actions {
    position: absolute;
    bottom: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 100%;

    background: var(--ion-color-light);
    border: 1px solid #dedede;

    padding: 8px 16px;
  }

  app-action-add-slide {
    button {
      --button-action-flex-direction: row;

      @include button.action;

      ion-icon {
        @include button.icon;

        font-size: 14px;
        margin: 0 4px 0 0;
      }
    }
  }
}
