@use '@growi/core/scss/bootstrap/init' as *;
@use '~/styles/mixins';

$slack-work-space-name-card-background: #fff5ff;
$slack-work-space-name-card-border: #efc1f6;

.admin-page :global {
  .admin-user-menu {
    .dropdown-menu {
      right: 0;
      left: auto;
      width: 400px;
    }
  }

  .admin-group-menu {
    .dropdown-menu {
      right: 0;
      left: auto;
    }
  }

  .admin-customize {
    .ss-container img {
      padding: 0.5em;
      background-color: $gray-300;
    }

    .table-user-list {
      .label-admin {
        margin-left: 1em;
      }
    }
  }

  .admin-setting-header {
    border-bottom: 1px solid transparent;
  }

  .admin-security {
    .passport-logo {
      height: 32px;
      padding: 3px;
      margin-top: -0.5em;
      background-color: black;
    }

    .auth-mechanism-configurations {
      min-height: 80vh;
    }
  }

  .admin-customize-sidebar-icon {
    svg {
      width: 20px;
      height: 20px;
    }
  }

  .admin-notification {
    table .admin-notif-list {
      td {
        vertical-align: middle;
      }
      .td-abs-center {
        width: 1px; // to keep the cell small
        text-align: center;
      }
    }
  }

  .admin-importer {
    table.table-mapping {
      th,
      td {
        text-align: center;
      }
    }
  }

  .admin-export {
    .progress {
      height: 8px;
    }
  }

  /*
  Slack Integration
  */
  .selecting-bot-type {
    .supplementary-bot-name {
      font-size: 1rem;
    }
    .bg-info {
      font-size: 0.6rem;
    }
    .admin-bot-card {
      min-width: 300px;
      max-width: 500px;
      border-radius: 8px !important;
      .grw-botcard-title-active {
        color: $gray-200;
      }
    }
    .border-primary {
      border-width: 2px;
    }
  }
  // TODO: change to utility class on Bootstrap 5
  .slack-connection-log {
    .slack-connection-log-title {
      border-left: 2px solid;
    }
    .slack-connection-log-body {
      border: 2px solid;
    }
  }

  .admin-slack-integration {
    .admin-setting-header {
      .btn-link {
        font-size: 1rem;
      }
    }
  }

  .bot-integration {
    .admin-bot-card {
      border-radius: 8px !important;
    }
    .admin-border-failed {
      border-style: dashed;
      border-width: 2px;
    }
    .admin-border-success {
      border-width: 3px;
    }

    .grw-bridge-proxy-circle {
      position: relative;
      .circle {
        inset: 0;
        width: 100px;
        height: 100px;
        margin:auto;
        border: 13px solid;

        @include media-breakpoint-down(lg) {
          width: 50px;
          height: 50px;
          border: 8px solid;
        }
      }

      .circle-inner {
        transform: translate(-50%, 25%);
      }
      .circle-inner.grw-proxy-server-name {
        margin-top: 55px;
        transform: translate(-50%, -25%);
      }
    }

    // switch layout for Bridge component
    .grw-bridge-container {
      // with ProxyCircle
      &.with-proxy {
        .hr-container {
          margin-top: 40px;
          @include media-breakpoint-up(lg) {
            margin-top: 65px;
          }
        }
      }
    }

    .slack-work-space-name-card {
      background-color: $slack-work-space-name-card-background;
      border: 1px solid $slack-work-space-name-card-border;
    }
  }

  //// TODO: migrate to Bootstrap 4
  //// omit all .btn-toggle and use Switches
  //// https://getbootstrap.com/docs/4.2/components/forms/#switches
  //
  // Toggle Twitter Bootstrap button class when active
  // https://jsfiddle.net/ms040m01/3/
  // @mixin active-color($color, $bg-color, $border-color) {
  //   color: $color;
  //   background-color: darken($bg-color, 10%);
  //   border-color: $border-color;

  //   &:hover {
  //     background-color: darken($bg-color, 15%);
  //   }
  // }
  // .btn-group.btn-toggle {
  //   .btn {
  //     min-width: 60px;
  //   }
  //   .btn.active[data-active-class='default'] {
  //     @include active-color($btn-default-color, $btn-default-bg, $btn-default-border);
  //   }
  //   .btn.active[data-active-class='primary'] {
  //     @include active-color($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  //   }

  //   // disabled btn-group styles
  //   &.btn-group-disabled {
  //     .btn:hover {
  //       cursor: not-allowed;
  //       background-color: unset;
  //     }
  //   }
  // }

  .admin-audit-log {
    .select-action-dropdown {
      max-height: 500px;
      overflow-y: auto;
    }
    .date-range-picker {
      width: 188px;
    }
    .jump-page-input {
      width: 50px;
    }
  }

  #layoutOptions {
    .customize-layout-card {
      border: 4px solid $border-color;
    }
  }

  // theme selector
  #themeOptions {
    // layout
    .theme-option-container {
      min-width: 100px;
      a {
        padding: 3px;
        margin-right: 10px;
        margin-bottom: 10px;

        svg {
          display: block;
        }
      }
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    // style
    .theme-option-container a {
      background-color: $gray-100;
      border: 1px solid $border-color;
    }
    .theme-option-name, .theme-option-badge {
      opacity: 0.3;
    }
    // style (active)
    .theme-option-container.active {
      .theme-option-name, .theme-option-badge {
        opacity: 1;
      }
    }
  }

  .settings-table {
    table-layout: fixed;

    .item-name {
      width: 150px;
    }

    td.unused {
      opacity: 0.5;
    }

    &.use-only-env-vars .from-env-vars {
      background-color: rgba($info, 0.1);
    }
  }

  .admin-navigation {
    & > a + a {
      margin-top: 2px;
    }
    &.sticky-top {
      top: 30px;
    }
  }
}