@import '_theme.scss';

@import '~element-ui/packages/theme-chalk/src/reset';
@import '~element-ui/packages/theme-chalk/src/index';

body {
  background: #eeeeee;
}

$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px,
);

@each $size, $value in $breakpoints {
  .dockite-container--#{$size} {
    width: 100%;
    max-width: $value;
    margin: 0 auto;
  }
}

pre.dockite-data--raw {
  background: #eeeeee;
  border-radius: 4px;
  border: 1px solid darken(#eeeeee, 15%);
  max-height: 400px;
  overflow: auto;
  padding: 1rem;
}

.el-form-item__description {
  color: rgba(0, 0, 0, 0.66);
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}

.el-alert--info a {
  color: darken($--color-info, 15%);

  &:hover {
    color: darken($--color-info, 22%);
  }
}

.dockite-table--actions {
  .dockite-table-actions--column > * {
    padding-right: 0.75rem;

    &:last-child {
      padding-right: 0;
    }
  }

  > * {
    padding-right: 0.75rem;

    &:last-child {
      padding-right: 0;
    }
  }
}

.dockite-text--subtitle {
  border-left: 4px solid #eeeeee;
  padding-left: 0.5rem;
  color: rgba(0, 0, 0, 0.66);
  font-style: italic;
}

.el-loading-mask {
  display: flex;
  background-color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;

  .el-loading-spinner {
    width: auto;
  }
}

.el-icon-hamburger {
  &:before {
    content: '\2630';
  }
}

li.el-dropdown-menu__item {
  position: relative;
}

li.el-dropdown-menu__item a::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.el-form-item__description {
  padding-top: 7px;
}

.el-loading-parent__min-height.el-loading-parent--relative {
  transition: all 300ms;
  min-height: 60vh;
}

button:focus,
:focus {
  outline: none;
}

.dockite-element--pagination {
  padding: 1rem;
}

.dockite-aside--sidemenu .el-menu-item-group__title {
  font-size: 0.7rem;
  // text-decoration: underline;
}

.dockite-table-filter--popover {
  position: absolute;
  width: 90%;
  bottom: 0;
  left: 12px;
}

.el-form-item {
  margin-bottom: 2rem;

  .el-form-item__label {
    line-height: 1.2;
  }
}