.themosis {
  .edit-post-meta-boxes-area {
    #poststuff {
      h2.hndle {
        padding-left: $paddingV;
      }
    }
  }
}

.themosis__metabox {
  &__footer {
    display: flex;
    background: $light-gray-200;
    border-top: 1px solid $light-gray-500;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: $paddingV;
  }

  &__status {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: $paddingH;

    &__icon {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      width: 22px;
      height: 22px;

      svg.icon__saving {
        @include animate_rotation;
      }
    }

    &__text {
      display: inline;
      margin: 0 0 0 8px;
      padding: 0;
      line-height: 1;
    }
  }
}

.themosis__tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  &__menu {
    width: 25%;
    max-width: $max;
    background-color: $light-gray-500;
    padding-right: 1px;

    button {
      display: block;
      width: 100%;
      padding: $paddingH $paddingH $paddingH calc(#{$paddingH} - 4px);
      font-size: 13px;
      font-weight: 600;
      background-color: #F5F5F5;
      color: $dark-gray-400;
      border: none;
      border-left: 4px solid #F5F5F5;
      margin-bottom: 1px;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;

      &:hover {
        background-color: $white;
        border-left: 4px solid $white;
      }

      span.shortname {
        display: none;
      }

      span.fullname {
        display: inline;
      }
    }

    button.tab__active {
      background-color: $white;
      color: $blue-medium-600;
      border-left: 4px solid $blue-medium-600;
    }

    button.tab__has__errors {
      color: $red-medium-500;
      border-left: 4px solid $red-medium-500;
    }
  }

  &__body {
    background-color: $white;
    flex: 1 1 auto;
  }
}

.themosis__field {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: $paddingV;
  border-bottom: 1px solid #EEEEEE;

  &:last-child {
    border: none;
  }

  &__label {
    font-weight: 600;
  }
}

.themosis__column {
  &__label {
    width: 33.33%;
  }

  &__content {
    width: 66.66%;
  }
}

.themosis__description {
  margin-top: 8px;
  color: $dark-gray-400;
}

.themosis__field__errors {
  margin-top: 8px;

  ul {
    display: inline-block;
    background-color: $red-medium-100;
    border-radius: $radius-round-rectangle;
    padding: calc(#{$paddingH} / 2);
    margin: 0;
    color: $red-medium-500;

    li {
      color: $red-medium-500;
      margin: 0;
    }
  }
}

.themosis__input {
  min-width: auto;
  width: 100%;
  max-width: 100%;
  border: 1px solid $light-gray-600;
  border-radius: $radius-round-rectangle;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
  padding: calc(#{$paddingH} / 2);
}

.themosis__input__hidden {
  padding: calc(#{$paddingH} / 2) $paddingH;
  background-color: $light-gray-200;
  border: 1px solid $light-gray-600;
  text-shadow: 0 1px 0 $white;
  border-radius: $radius-round-rectangle;
}

.themosis__textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid $light-gray-600;
  border-radius: $radius-round-rectangle;
  padding: calc(#{$paddingH} / 2);
}

.has__errors {
  .themosis__input {
    border-color: $red-medium-500;
  }

  .themosis__textarea {
    border-color: $red-medium-500;
  }
}

/* Gutenberg styles */
.wp-editor {
  .themosis__metabox {
    &__footer {
      background: $light-gray-200;
      padding: $paddingV;
    }
  }

  .themosis__tabs {
    &__menu {
      button {
        padding: $paddingH;
      }
    }
  }

  .themosis__field {
    padding: $paddingV;
  }
}

.themosis {
  .edit-post-layout__metaboxes:not(:empty) {
    .edit-post-meta-boxes-area {
      margin: auto 0;
    }
  }
}

/* Side context */
#side-sortables {
  .themosis__field {
    display: block;
  }

  .themosis__column {
    &__label {
      width: 100%;
      padding-bottom: calc(#{$paddingV} / 2);
    }

    &__content {
      width: 100%;
    }
  }
}

/* Mobile */
@media screen and (max-width: $break-medium) {
  .themosis__tabs {
    &__menu {
      min-width: 50px;
      width: 50px;
      max-width: 50px;

      button {
        span.shortname {
          display: block;
          text-align: center;
          font-size: 15px;
        }

        span.fullname {
          display: none;
        }
      }
    }
  }

  .themosis__field {
    display: block;
  }

  .themosis__column {
    &__label {
      width: 100%;
      padding-bottom: calc(#{$paddingV} / 2);
    }

    &__content {
      width: 100%;
    }
  }
}

/* Desktop */
@media screen and (min-width: $break-wide){
  .is-side {
    .themosis__input {
      max-width: $max;
    }
  }
}