@import "../../node_modules/sg-styleguide/lib/components/toolbar/toolbar.scss";
@import "../../node_modules/sg-styleguide/lib/components/title/title.scss";
@import "../../node_modules/sg-styleguide/lib/components/text/text.scss";
@import "../../node_modules/sg-styleguide/lib/components/button/button.scss";
@import "../../node_modules/sg-styleguide/lib/components/tabs/tabs.scss";
@import "../../node_modules/sg-styleguide/lib/components/link/link.scss";
@import "../../node_modules/sg-styleguide/lib/components/notice/notice.scss";

.sg-plugin-information .plugin-details-modal {
  border-radius: 3px;
  overflow: hidden;
}

.sg-plugin-information #plugin-information * {
  box-sizing: initial;
}

.sg-plugin-information #plugin-information #plugin-information-footer{
  @extend .sg-toolbar, .sg-toolbar--background-light, .sg-toolbar--density-comfortable, .sg-toolbar--align-baseline, .sg-toolbar--justify-flex-end, .sg-toolbar--direction-row;
  border: none;
  height: auto;
  width: auto;
  z-index: 2;
}

.sg-plugin-information #plugin-information .button-primary {
  @extend .sg-button, .sg-button--primary, .sg-button--medium;
  margin: 0;
  min-height: 0;
  line-height: 36px;

  &:focus {
    box-shadow: none;
  }
}

.sg-plugin-information #plugin-information.wp-core-ui .button-primary.disabled{
  color: var(--color-disabled) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  pointer-events: none;

  @include set-keyboard-focus() {
    box-shadow: none;
  }

  &:hover {
    color: var(--color-disabled);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

.sg-plugin-information #plugin-information #plugin-information-tabs {
  @extend .sg-tabs, .sg-tabs--background-transparent, .sg-tabs--medium, .sg-tabs--active-color-sky;
  padding: 0;
  border: none;
  overflow: hidden;
  width: 100%;
}

.sg-plugin-information #plugin-information #plugin-information-tabs a{
  @extend .sg-tabs__tab;
  border: none;
  box-shadow: none;
}
.sg-plugin-information #plugin-information #plugin-information-tabs a.current {
  @extend .sg-tabs__tab--active;
  margin: 0;
}

.sg-plugin-information #plugin-information-title.with-banner div.vignette {
  box-shadow: inset 0 0 50px 4px rgba(0,0,0,.2), inset 0 0px 0 rgba(0,0,0,.1);
}

.sg-plugin-information #plugin-information-content {
  border-top: 1px solid var(--border-color-outer);
  margin-top: -1px;
}

.sg-plugin-information #plugin-information-content .section {
  margin-bottom: $space-large;
}

.sg-plugin-information #plugin-information-content .section p,
.sg-plugin-information #plugin-information-content .review-body{
  @extend .sg-text, .sg-text--size-medium;
  margin: $space-x-small 0;
}

.sg-plugin-information #plugin-information-content a {
  @extend .sg-link;

  &:focus {
    box-shadow: none;
    text-decoration: none;
  }
}

.sg-plugin-information #plugin-information-content h1,
.sg-plugin-information #plugin-information-content h2,
.sg-plugin-information #plugin-information-content h3,
.sg-plugin-information #plugin-information-content h4,
.sg-plugin-information #plugin-information-content h5,
.sg-plugin-information #plugin-information-content h6 {
  @extend .sg-title, .sg-title--density-compact;
  margin: 0;

}
.sg-plugin-information #plugin-information-content h1 {
  @extend .sg-title--level-1
}
.sg-plugin-information #plugin-information-content h2 {
  @extend .sg-title--level-2
}
.sg-plugin-information #plugin-information-content h3 {
  @extend .sg-title--level-3
}
.sg-plugin-information #plugin-information-content h4 {
  @extend .sg-title--level-4
}

.sg-plugin-information #plugin-information-content .section >*+h4,
.sg-plugin-information #plugin-information-content .section >*+h3 {
  margin-top: $space-large;
}

.sg-plugin-information #plugin-information-title.with-banner h2 {
  @extend .sg-title, .sg-title--level-1;
  padding: 5px 20px;
  margin-top: 180px;
}

.sg-plugin-information #plugin-information #section-screenshots li p {
  @extend .sg-text--size-small;
  padding: 0;
  margin-top: 0;
}

.sg-plugin-information #plugin-information-content .review-body {
  margin-bottom: $space-large;
}

.sg-plugin-information #plugin-information .reviewer-info .star-rating {
  position: relative;
  top: $space-xx-small;
}

.sg-plugin-information #plugin-information .star-rating .star {
  color: var(--ocean-base);
}

.sg-plugin-information #plugin-information .counter-bar {
  background-color: var(--ocean-base);
}

.sg-plugin-information #plugin-information .fyi {
  border: none;
  background: var(--background-main);
}

.sg-plugin-information #plugin-information .fyi ul.contributors li img {
  display: inline-block;
}

.sg-plugin-information #plugin-information .fyi h3 {
  @extend .sg-title, .sg-title--level-6;
  margin-bottom: 0;
  color: var(--typography-darkest);
}

.sg-plugin-information #section-holder .notice {
  border-top:none;
  border-right:none;
  border-bottom:none;
  @extend .sg-notice, .sg-notice--background-light, .sg-notice--border, .sg-notice--type-warning;

  &:before {
    content: url('../img/svg/warning-colored.svg');
    @extend .sg-notice__icon;
    width: 20px;
    height: 20px;
  }

  p {
    margin: 0;
    @extend .sg-notice__content, .sg-notice__content--size-expanded;
    padding-left: 0;
  }

}

@media (max-width: 640px) {
  .sg-plugin-information #plugin-information .fyi {
    margin: 20px;
  }
  .sg-plugin-information #section-holder{
    padding-left: 20px;
    padding-right: 20px;
  }
  .sg-plugin-information #plugin-information #plugin-information-tabs {
    overflow-x: scroll;
  }
}