/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "~@bentley/ui-core/lib/ui-core/style/typography";

$cube-outer-width: 96px;
$button-width: 20px;
$nav-cube-width: 64px;
$nav-cube-side-width: 14px;

$grad-start: $buic-background-1;
$grad-end: $buic-background-4;

$grad-start-highlight: $buic-background-2;
$grad-end-highlight: $buic-background-5;

$arrow-margin: -3px;

.components-cube-container {
  position: relative;
  width: $cube-outer-width;
  height: $cube-outer-width;

  .cube-element-container {
    position: absolute;
    left: 0;
    top: 0;
    width: $cube-outer-width;
    height: $cube-outer-width;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav-cube {
      width: $nav-cube-width;
      height: $nav-cube-width;
      .nav-cube-face {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        font-size: $uicore-cap-size;
        font-weight: $uicore-font-weight-semibold;
        color: $buic-text-color;
        box-shadow: inset 0px 0px 1.0px 0.2px #000;
        .face-row {
          display: flex;
          flex-direction: row;
          height: $nav-cube-side-width;
          width: 100%;
          &.cube-center {
            height: auto;
            flex-grow: 1;
          }
          .face-cell {
            cursor: pointer;
            user-select: none;
            width: $nav-cube-side-width;
            &.cube-center {
              width: auto;
              flex-grow: 1;
            }
            &.cube-hover {
              color: $buic-foreground-activehover;
              background: $buic-background-active-overlay;
            }
            &.cube-active {
              color: $buic-foreground-activehover;
              background: $buic-background-pressed-overlay;
            }
          }
          &.cube-center .face-cell.cube-center {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .cube-left, .cube-right, .cube-front, .cube-back {
          background: linear-gradient(#{$grad-start}, #{$grad-end});
      }
      .cube-top {
        background: $grad-start;
      }
      .cube-bottom {
        background: $grad-end;
      }
      &.cube-dragging {
        .face-row .face-cell {
          &.cube-hover, &.cube-active {
            background: transparent;
          }
        }
        .cube-left, .cube-right, .cube-front, .cube-back {
            background: linear-gradient(#{$grad-start-highlight}, #{$grad-end-highlight});
        }
        .cube-top {
          background: $grad-start-highlight;
        }
        .cube-bottom {
          background: $grad-end-highlight;
        }
      }
    }
  }
  .cube-pointer {
    position: absolute;
    height: $button-width;
    width: $button-width;
    font-size: $button-width;
    color: $buic-background-2;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    cursor: pointer;

    &:not(.cube-visible) {
      display: none;
    }

    &:hover {
      color: $buic-row-selection;
    }

    &:focus {
      outline: none;
    }

    &.cube-up {
      margin: $arrow-margin auto;
      left: 0px;
      right: 0px;
      top: 0px;
    }
    &.cube-down {
      margin: $arrow-margin auto;
      left: 0px;
      right: 0px;
      bottom: 0px;
    }
    &.cube-left {
      margin: auto $arrow-margin;
      top: 0px;
      bottom: 0px;
      left: 0px;
    }
    &.cube-right {
      margin: auto $arrow-margin;
      top: 0px;
      bottom: 0px;
      right: 0px;
    }
  }
}