/*******************************
         Theme Overrides
*******************************/

@toolbarWidth: 80px;
@sidebarWidth: 375px;
@collapsedWidth: 20px;

/* All Sizes */
.ui.container {
  display: block;
  max-width: @maxWidth !important;
  transition:
    width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
    margin-left 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
    margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.contentWidthMedia(@width, @gutter, @offset) {
  .ui.container {
    width: @width !important;
    margin-right: @gutter !important;
    margin-left: @gutter !important;
  }

  .drag.handle.wrapper {
    margin-left: @offset !important;
  }

  .block .delete-button {
    margin-right: @offset !important;
  }
}

.contentWidth(@offset) {
  @media only screen and (max-width: @largestMobileScreen + @offset) {
    .contentWidthMedia(@mobileWidth, @mobileGutter, -12px);

    [class*='mobile hidden'],
    [class*='tablet only']:not(.mobile),
    [class*='computer only']:not(.mobile),
    [class*='large screen only']:not(.mobile),
    [class*='widescreen only']:not(.mobile),
    [class*='or lower hidden'] {
      display: none !important;
    }
  }
  @media only screen and (min-width: @tabletBreakpoint + @offset) and (max-width: @largestTabletScreen + @offset) {
    .contentWidthMedia(@tabletWidth, @tabletGutter, -30px);

    [class*='mobile only']:not(.tablet),
    [class*='tablet hidden'],
    [class*='computer only']:not(.tablet),
    [class*='large screen only']:not(.tablet),
    [class*='widescreen only']:not(.tablet),
    [class*='or lower hidden']:not(.mobile) {
      display: none !important;
    }
  }
  @media only screen and (min-width: @computerBreakpoint + @offset) and (max-width: @largestSmallMonitor + @offset) {
    .contentWidthMedia(@computerWidth, @computerGutter, -30px);

    [class*='mobile only']:not(.computer),
    [class*='tablet only']:not(.computer),
    [class*='computer hidden'],
    [class*='large screen only']:not(.computer),
    [class*='widescreen only']:not(.computer),
    [class*='or lower hidden']:not(.tablet):not(.mobile) {
      display: none !important;
    }
  }
  @media only screen and (min-width: @largeMonitorBreakpoint + @offset) {
    .contentWidthMedia(@largeMonitorWidth, @largeMonitorGutter, -30px);

    [class*='mobile only']:not([class*='large screen']),
    [class*='tablet only']:not([class*='large screen']),
    [class*='computer only']:not([class*='large screen']),
    [class*='large screen hidden'],
    [class*='widescreen only']:not([class*='large screen']),
    [class*='or lower hidden']:not(.computer):not(.tablet):not(.mobile) {
      display: none !important;
    }
  }
}

body:not(.has-toolbar):not(.has-sidebar):not(.has-toolbar-collapsed):not(
    .has-sidebar-collapsed
  ) {
  .contentWidth(0);
}

body.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed) {
  .contentWidth(@toolbarWidth);
}

body.has-toolbar.has-sidebar {
  .contentWidth(@toolbarWidth + @sidebarWidth);
}

body.has-toolbar.has-sidebar-collapsed {
  .contentWidth(@toolbarWidth + @collapsedWidth);
}

body.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
  .contentWidth(@collapsedWidth);
}

body.has-toolbar-collapsed.has-sidebar {
  .contentWidth(@collapsedWidth + @sidebarWidth);
}

body.has-toolbar-collapsed.has-sidebar-collapsed {
  .contentWidth(@collapsedWidth + @collapsedWidth);
}

.drag.handle.wrapper {
  margin-left: -15px !important;
}

.block .delete-button {
  margin-right: -25px !important;
}

/* Hack for escape the blocks container in blocks full width */
.full-width {
  position: relative;
  right: 50%;
  left: 50%;
  width: 100vw !important;
  max-width: initial !important;
  margin-right: -50vw !important;
  margin-left: -50vw !important;
}