.brick-previewer {
  .layout-switcher {
    width: 300px;
  }

  .layout-switcher .btn:focus {
    box-shadow: none;
  }

  .layout-switcher .btn {
    color: $adminYellow;
    border: 1px solid $adminYellow;
    width: 100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .layout-switcher .btn.active {
    background: $adminYellow;
    color: #fff;
  }

  .preview-iframe {
    display: block;
    min-height: 600px;
    width: 100%;
    border: 5px solid $adminYellow;
    margin: 0 auto;
    transition: .5s;
  }

  .preview-iframe.mobile {
    width: calc(320px + 16px); /* add scrollbar aproximate width */
  }

  .preview-iframe.tablet {
    width: 960px;
  }

  .preview-iframe.mobile,
  .preview-iframe.tablet {
    border-color: #353535;
    border-radius: 20px;
    border-width: 20px;
  }
}

.preview-toolbar {
  .btn-group {
    box-shadow: 0 0 67px 2px rgba(0, 0, 0, 0.75);
    border-radius: 6px;
    .brick-action {
      background: $adminYellow;
      color: #fff;
      min-width: 75px;
      &:hover {
        background: darken($adminYellow, 15%);
      }
    }
  }
}
