@import "../../../stylesheets/variables/_all";

$toolbar-margin: .8rem;
$toolbar-box-shadow: 0 0 10px -2px rgba(0, 0, 0, .25);
$toolbar-button-width: 3rem;
$toolbar-button-height: 3rem;
$toolbar-button-font-size: 1.75rem;
$toolbar-button-border: 1px;
$toolbar-button-border-radius: 5px;
$toolbar-list-bg: darken($color-white, 10%);
$toolbar-list-color: $color-gray;

.toolbarContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: $toolbar-margin;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  @include mq("#{$landscape} and (max-height:#{upper-bound($small-range)}), #{$small-only}") {
    transform: scale(.75);
    transform-origin: right;
  }
}

.toolbarWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: $toolbar-box-shadow;
  pointer-events: all;

  .buttonWrapper > .toolbarButton {
    border-bottom: 1px solid $color-gray-lighter;
  }

  .buttonWrapper:first-child > .toolbarButton {
    border-top-left-radius: $toolbar-button-border-radius;
    border-top-right-radius: $toolbar-button-border-radius;

    &.toolbarActive {
      border-top-left-radius: 0;
    }
  }

  .buttonWrapper:last-child > .toolbarButton {
    border-bottom: 0;
    border-bottom-left-radius: $toolbar-button-border-radius;
    border-bottom-right-radius: $toolbar-button-border-radius;

    &.toolbarActive {
      border-bottom-left-radius: 0;
    }
  }
}

.buttonWrapper {
  width: $toolbar-button-width;
  min-width: $toolbar-button-width;
  height: $toolbar-button-height;
  min-height: $toolbar-button-height;
  position: relative;
}

.toolbarButton {
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center !important;
  justify-content: center !important;
  font-size: $toolbar-button-font-size;
  position: relative;
  border-radius: 0;
  box-shadow: none !important;
  z-index: 1;

  &:focus, &:hover {
    border: 0;
  }

  i {
    color: $color-gray;
  }

  &.toolbarActive {
    background-color: $toolbar-list-bg;

    i {
      color: $toolbar-list-color;
    }
  }
}

.toolbarList {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: $toolbar-button-height;
  position: absolute;
  right: $toolbar-button-height;
  top: 0;
  box-shadow: $toolbar-box-shadow;

  .buttonWrapper:first-child > .toolbarListButton {
    border-top-left-radius: $toolbar-button-border-radius;
    border-bottom-left-radius: $toolbar-button-border-radius;
  }
}

.toolbarListButton {
  width: $toolbar-button-width;
  height: $toolbar-button-height;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $toolbar-button-font-size;
  background-color: $toolbar-list-bg;
  border: 0 !important;
  box-shadow: none;
  border-radius: 0;
  padding: initial;

  &:hover, &:focus {
    background-color: darken($toolbar-list-bg, 10%);
  }

  i {
    color: $toolbar-list-color;
  }

  svg {
    fill: $toolbar-list-color;
  }
}

.selectedListButton {
  background-color: $toolbar-list-color !important;

  i {
    color: darken($toolbar-list-bg, 10%) !important;
  }

  svg {
    fill: darken($toolbar-list-bg, 10%);
  }
}

.customSvgIcon {
  position: absolute;
  width: $toolbar-button-width;
  height: $toolbar-button-height;
}

.textThickness {
  font-family: Arial, sans-serif;
  font-weight: normal;
  text-shadow: -1px 0 darken($toolbar-list-bg, 10%), 0 1px darken($toolbar-list-bg, 10%), 1px 0 darken($toolbar-list-bg, 10%), 0 -1px darken($toolbar-list-bg, 10%);
  margin: auto;
  color: $toolbar-list-color;
}