// Sides

.mdp-controls-sides
  display: flex
  justify-content: space-between

  .mdp-controls-sides-single
    margin-right: 24px

  .mdc-text-field

    &.mdc-input-width
      max-width: 80px

  .mdc-select

    &.mdc-select-width,
    .mdc-select-width
      max-width: 100px

  label
    text-transform: capitalize

  .mdp-controls-sides-lock
    max-height: 56px
    width: 16px
    background: url( '../images/ui/link.svg' ) center center no-repeat
    background-size: contain
    opacity: .4
    cursor: pointer
    transition: .2s
    filter: grayscale(1)

    &:hover
      opacity: 1

    &.active-lock
      opacity: .8
      filter: none

      &:hover
        opacity: 1
        filter: none

/** Measures controls */
.mdp-controls-unit-slider
  display: flex

.mdp-controls-unit-slider-slider
  min-width: 300px
  margin-right: 24px

.mdp-controls-unit-slider-units
  max-width: 100px

  .mdc-select-width
    max-width: 100px

/** Media Library */
.mdc-media-library-field-image
  max-width: 100%
  max-height: 100%
  overflow: hidden
  text-align: center
  height: 120px
  border: 1px solid #d2d7db
  background-image: linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd)
  background-size: 16px 16px
  background-position: 0 0,8px 8px
  background-color: #f6f6f6
  background-repeat: repeat
  display: flex
  align-items: center
  justify-content: center

.mdc-media-library-field-img-box
  position: relative
  width: 300px
  background-color: rgba(2,116,230,.12)
  border-top-right-radius: 4px
  border-top-left-radius: 4px

.mdc-media-library-field-remove
  cursor: pointer
  position: absolute
  right: 10px
  top: 10px
  background: #fff
  border: 1px solid #d2d7db
  border-radius: 5px
  padding: 4px 4px 0 4px
  user-select: none

.mdc-media-library-field-btn
  width: 100%
  border-top-right-radius: 0
  border-top-left-radius: 0
  background-color: white !important
  transition: .5s ease-in-out

  .dashicons
    margin-right: 6px
    font-size: 17px
    line-height: 20px

  &:hover
    background-color: unset !important
    transition: .5s ease-in-out

.mdc-media-library-field-helper-text
  margin-right: 16px
  margin-left: 16px
  color: rgba(10,33,56,.6)
  margin-top: 4px
  font-family: Roboto,sans-serif
  font-size: .75rem
  line-height: normal
  font-weight: 400
  letter-spacing: .03333em
