src/components/ThumbnailControls/ThumbnailControls.scss
@import '../../constants/panel';

.thumbnailControls-overlay {
  display: grid;
  @include ie11 {
    display: flex;
  }
  text-align: center;
  z-index: 2;
  margin-top: 5px;
  grid-template-areas: 'rotate delete . more';
  grid-template-columns: repeat(3, 1fr);

  .Button {
    height: 32px;
    padding: 0px;
    width: 32px;

    .Icon {
      height: 24px;
      width: 24px;
      color: var(--icon-color);
    }

    &:hover {
      background: var(--view-header-button-hover);
      border-radius: 4px;
    }

    &.active {
      background: var(--view-header-button-active);

      .Icon {
        color: var(--selected-icon-color);
      }
    }
  }

  &.modular-ui {
    .Button:hover {
      border: 1px solid var(--focus-border);
      background: var(--tools-button-hover);
    }
  }

  .rotate-button {
    grid-area: rotate;
  }

  .delete-button {
    grid-area: delete;
  }

  .more-options {
    grid-area: more;
  }
}

.thumbnailControls-overlay.custom-buttons {
  .Button {
    grid-area: auto; // remove gride when buttons are customized
  }
}

.thumbnailControls {
  display: flex;
  flex-direction: row;
  text-align: center;
  z-index: 2;
  margin-top: 5px;

  .Button {
    height: 32px;
    padding: 0px;
    width: 32px;
    margin: 0px 4px;

    .Icon {
      height: 24px;
      width: 24px;
      color: var(--icon-color);
    }

    &:hover {
      background: var(--view-header-button-hover);
      border-radius: 4px;
    }
  }
}
