@use "../vars";
$deleteModalBackground: #EEE;
$deleteButton: #4B8ADD;
$tool-shelf-border-width: 1px;

.tool-shelf {
  height: vars.$tool-shelf-height;
  width: 100%;
  background-color: white;
  border-bottom: $tool-shelf-border-width solid #a6a6a6;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  z-index: 5;

  .tool-shelf-component-buttons, .tool-shelf-right-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;

    .tool-shelf-button {
      height: calc(vars.$tool-shelf-height - $tool-shelf-border-width);
      width: fit-content;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;

      // When tool shelf button is a menu button, it has a span wrapper
      // This overrides wrapping span styles
      &.tool-shelf-menu {
        > span {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 46px;
          margin: 0 10px 0 11px;

          svg {
            height: 30px;
            width: 30px;
          }
          > .tool-shelf-tool-label {
            background-color: transparent;
            padding-inline-start: 0;
            padding-inline-end: 0;
            height: 18px;
            line-height: 16px;
            letter-spacing: 0.2px;
            min-height: 0;
            font-size: 14px;
            position: relative;
            top: -1px;
          }
        }
      }

      &:disabled {
        opacity: 0.35;
        box-shadow: none;
        pointer-events: none;
      }
      &:hover:not(:disabled) {
        background-color: vars.$icon-fill-light;
      }
      &:active:not(:disabled) {
        background-color: #bfefff;
      }
      &.menu-open {
        height: calc(vars.$tool-shelf-height - $tool-shelf-border-width);
        width: fit-content;
        background-color: vars.$icon-fill-light;
      }

      .tool-shelf-button-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 9px 10px 0px 10px;
        height: 46px;

        svg {
          height: 30px;
          width: 30px;
          position: relative;
          bottom: 1px;
        }

        .tool-shelf-tool-label {
          background-color: white;
          min-height: 16px;
          background-color: transparent;
          padding-inline-start: 0;
          padding-inline-end: 0;
          line-height: 18px;
          line-height: 16px;
          letter-spacing: 0.2px;
          min-height: 0;
          font-size: 14px;

          &.menu {
            background-color: white;
          }
        }
      }
    }
  }
}

.vertical-toolbar-container {
  .tool-shelf {
    align-items: stretch;
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    width: auto;

    .tool-shelf-component-buttons, .tool-shelf-right-buttons {
      flex-direction: column;
      width: 100%;

      .tool-shelf-button {
        height: 52px;
        padding: 0 10px;
        width: 100%;

        &.first {
          height: 56px;
          padding-top: 4px;
        }

        &.no-padding {
          padding: 0;
        }

        .tool-shelf-button-content, > span {
          height: 100%;
          margin: 0;

          svg {
            height: 24px;
            width: 24px;
          }
        }
      }

      .tool-shelf-menu-list.top-menu {
        margin: 0 0 0 -13px;
      }
    }

    .tool-shelf-right-buttons {
      .tool-shelf-button {
        height: 36px;

        .tool-shelf-button-content, > span {
          flex-direction: row;
          justify-content: flex-start;
          margin: auto;
          width: 100%;

          svg {
            height: 24px;
            margin-right: 5px;
            width: 24px;
          }
        }
      }
    }
  }
}

.tool-shelf-component-buttons, .tool-shelf-right-buttons {
  .tool-shelf-menu-list {
    border-radius: 4px;
    border-width: 0;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 6px 2px;

    &.top-menu {
      margin-top: -13px;
    }

    &.tool-shelf-menu-list:focus,
    &.tool-shelf-menu-list[tabindex]:focus,
    &.tool-shelf-menu-list:active {
      // TODO: This `!important` is necessary because of the following line in index.scss, which should be removed:
      // box-shadow: none !important;
      box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25) !important;
    }

    &.table {
      margin-left: 10px;
      width: 190px;
    }

    &.plugins {
      min-width: 180px;

      .submenu {
        margin-left: -21px;
      }
    }

    .category-title {
      margin-left: 8px;
    }

    .submenu-expand-icon {
      fill: vars.$icon-fill-dark;
      height: 26px;
      margin-left: 8px;
      position: absolute;
      right: 2px;
      width: 26px;
    }

    .tool-shelf-menu-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 30px;
      padding: 6px 12px 6px 8px;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.2px;
      color: vars.$default-font-color;

      &.table-menu-item {
        padding: 6px 3px 6px 8px;
      }

      > span {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      &:hover:not(:disabled), &:active:not(:disabled) {
        opacity: 1;
        background-color: #e9e9e9;
      }
      &:disabled {
        opacity: 0.4;
        background-color: transparent;
        pointer-events: none;
        cursor: not-allowed
      }

      .menu-list-button {
        height: 24px;
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        min-width: 0;
        background-color: transparent;
        position: absolute;
        right: 0px;
        margin-left: 6px;
        margin-right: 5px;

        &:hover:not(:disabled) {
          background-color: vars.$icon-fill-light;
        }
        &:active:not(:disabled) {
          background-color: #bfefff;
        }

        .menu-icon {
          margin: 0;
        }
      }

      .menu-icon {
        height: 18px;
        width: 18px;
        margin-right: 6px;
      }
    }
  }
}

.delete-data-set-modal-body {
  display: flex;
  flex-direction: row;
  padding: 20px 10px;
  font-family: 'museo-sans', sans-serif;
  background-color: $deleteModalBackground;

  .delete-data-set-modal-text {
    margin: 10px;

    .warning {
      font-size: 16px;
      font-weight: bold;
    }
    .description {
      font-size: 12px;
    }
  }
}

.delete-data-set-modal-footer {
  background-color: $deleteModalBackground;

  .delete-data-set-button-cancel {
    background-color: $deleteModalBackground;
    color: #555;
    &:hover{
      background-color: $deleteModalBackground;
    }
    &:active {
      background-color: #CCC;
    }
  }

  .delete-data-set-button-delete {
    background-color: $deleteButton;
    color: #fff;
    &:hover {
      background-color: $deleteButton;
    }
    &:active {
      background-color: #4B8ABD;
    }
  }
}

.tool-shelf,
.tool-shelf-button {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.2px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.tool-shelf-button.lang-bold .tool-shelf-tool-label{
  font-weight: 600;
}

.tool-shelf-button.lang-fa .tool-shelf-tool-label {
  font-family: 'Noto Sans Arabic', sans-serif;
}

.tool-shelf-button.lang-he .tool-shelf-tool-label {
  font-family: 'Noto Sans Hebrew', sans-serif;
}

.tool-shelf-button.lang-ja .tool-shelf-tool-label {
  font-family: 'Noto Sans Japanese', sans-serif;
}

.tool-shelf-button.lang-ko .tool-shelf-tool-label {
  font-family: 'Noto Sans Korean', sans-serif;
}

.tool-shelf-button.lang-th .tool-shelf-tool-label {
  font-family: 'Noto Sans Thai', sans-serif;
}

.tool-shelf-button.lang-zh .tool-shelf-tool-label {
  font-family: 'Noto Sans Chinese', sans-serif;
}
