@use './theme.data.scss' as data;
@use './theme.lib.scss' as lib;

.dropdown-option-widget {
  cursor: pointer;
  display: block;
  padding: data.$optionPadding;
  background-color: var(--theme-hack-bg2-color);

  &.cdk-focused,

  &:focus,
  &:active {
    outline: none;
  }
}

.button-widget {
  cursor: pointer;

  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;

  width: auto;
  padding: 0 10px;

  text-decoration: inherit;
  white-space: nowrap;

  background-color: inherit;
  border: none;
  border-radius: 3px;
  outline: none;

  transition:
    background 0.1s ease-out 0s,
    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
  transition-duration: 0s, 0.15s;

  app-cmf-doodle-icon,
  app-cmf-icon {
    display: flex;
  }

  [disabled],
  &.disabled {
    pointer-events: none;
    user-select: none;
    color: var(--color-gray-888);
    background-color: var(--color-gray-eee);
  }
}

@include lib.buttons(data.$buttonsMap);

.button-widget-content {
  overflow: hidden;
  margin: 0 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[tabindex] {
  &:focus,
  &:active {
    outline: none;
  }
}

.cmf-inline-crud-caption {
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
}

.cmf-dialog {
  &__header {
    display: flex;
    align-items: center;

    min-height: 50px;
    margin-bottom: 25px;
    padding: 0 20px;

    font-size: 18px;
    line-height: 34px;

    background-color: var(--theme-hack-bg-color, #f9f9f9);
    border-bottom: 1px solid #c5c5c5;
  }

  &__content {
    position: relative;

    overflow: auto;

    min-height: 150px;
    max-height: 75vh;
    padding: 0 38px;
  }

  &__footer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;

    min-height: 50px;
    padding: 0 20px;

    line-height: 34px;

    background-color: var(--theme-hack-bg-color, rgb(249 249 249));
    border-top: 1px solid rgb(197 197 197);
  }

  .no-margin {
    margin-bottom: 0;
  }
}

@mixin cmf-button {
  cursor: pointer;

  padding: 0 30px;

  font-size: var(--default-font-size);
  line-height: 34px;
  color: #fff;

  background-color: var(--accent-color-bg);
  border-color: rgb(0 0 0 / 12%);
  border-width: 0;
  border-radius: 5px;
  outline: none;
  box-shadow:
    0 0 0 0 rgb(0 0 0 / 20%),
    0 0 0 0 rgb(0 0 0 / 14%),
    0 0 0 0 rgb(0 0 0 / 12%);

  &:hover {
    opacity: 0.95;
  }
}

$colorBlack: var(--theme-hack-color, --default-color-black, --color-gray-222);

[cmf-button] {
  @include cmf-button;

  &.cmf-button {
    &__confluence {
      background-color: rgb(9 30 66 / 48%);
      border-width: 1px;
    }

    &__primary {
      background-color: var(--accent-color-bg);
      border-width: 1px;
    }

    &__warn {
      background-color: var(--default-color-red);
      border-width: 1px;
    }

    &__accent {
      background-color: var(--default-color-green);
      border: 1px solid var(--default-color-green);
    }

    &__basic {
      color: $colorBlack;
      background-color: transparent;
      border: 1px solid transparent;

      &:hover {
        background-color: var(--color-gray-eee);
      }
    }

    &__gray {
      color: $colorBlack;
      background-color: var(--color-gray-eee);
      border: 1px solid var(--color-gray-eee);
    }

    &__darkblue {
      background-color: #0053a0;
    }

    &__icon {
      padding: 0 8px;
      color: $colorBlack;
      background-color: transparent;
    }

    &__danger-outline {
      color: $colorBlack;
      background-color: transparent;
      border-color: var(--default-color-red);
      border-width: 1px;
    }

    &__outline {
      color: var(--color-gray-222);
      background-color: var(--color-gray-fff);
      border: 1px solid var(--color-gray-eee);

      &:hover {
        background-color: var(--app-bg-color-l3);
      }
    }

    &_small {
      padding: 0 10px;
    }
  }
}

div.tox .tox-pop__dialog {
  background-color: var(--color-gray-fff, #fff);
}

div.tox .tox-dialog {
  background-color: var(--theme-hack-bg2-color, var(--color-gray-fff, #fff));
}

div.tox .tox-label {
  color: var(--default-color);
}

div.tox .tox-dialog__popups .tox-tiered-menu .tox-collection__item-label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  width: min-content;

  -webkit-line-clamp: 2;
}

div.tox .tox-dialog__footer,
div.tox .tox-dialog__header {
  color: var(--theme-hack-color, #222f3e);
  background-color: var(--theme-hack-bg2-color, var(--color-gray-fff, #fff));
}

div.tox .tox-pop.tox-pop--bottom::after {
  border-color: var(--color-gray-fff, #fff) transparent transparent transparent;
}

div.tox .tox-dialog__body-nav-item {
  color: var(--theme-hack-color, rgb(34 47 62 / 70%));
}

div.tox .tox-dialog-wrap__backdrop {
  background-color: var(--default-background-backdrop-overlay);
}

div.tox .tox-dialog__body .tox-dropzone {
  background-color: var(--theme-hack-bg2-color, var(--color-gray-fff, #fff));
}

div.tox .tox-dialog__body .tox-dropzone p {
  color: var(--theme-hack-color, rgb(34 47 62 / 70%));
}

div.tox .tox-listboxfield .tox-listbox--select:focus,
div.tox .tox-textarea:focus,
div.tox .tox-textfield:focus,
div.tox .tox-listboxfield .tox-listbox--select,
div.tox .tox-textarea,
div.tox .tox-textfield,
div.tox .tox-toolbar-textfield {
  font: var(--wiki-text-font);
  color: var(--user-content-color, var(--default-color));
  background: var(--color-gray-fff, #fff);
}

div.tox .tox-listbox__select-chevron svg {
  fill: var(--default-color);
}