.ob-files {
  .ob-input {
    display: none;
  }
}

.ob-files__box {
  position: relative;
  background-color: $white-ter;
  height: 100%;
}

.ob-files__content-file {
  padding: $size-3;
}

.ob-files__attach-icon {
  display: block;
}

.ob-files__content-image {
  padding: $size-8;
  height: calc(50px + #{$size-3} * 2);
  display: flex;
}

.ob-files__image {
  display: block;
  margin: auto;
  max-height: 100%;
}

.ob-files__menu {
  position: absolute;
  top: $size-8;
  right: $size-8;
}

.ob-files__file-name {
  background: $grey-lighter;
  padding: $size-7;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ob-files__file-name-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.ob-files__add-new-button {
  width: 100%;
  height: auto;
  border-style: dashed;
  border-width: 3px;
  border-color: $grey-dark;
  color: $grey-dark;
  background-color: $white-ter;

  &:active,
  &:focus,
  &:hover {
    border-color: $grey-darker;
    color: $grey-darker;
  }
}

.ob-files__menu-remove-hidden {
  display: none;
}

.attachment__status-wrapper {
  display: inherit;
}

.ob-columns-container {
  container-name: ob-columns-container;
  container-type: inline-size;
}

@container ob-columns-container (min-width: #{$mobile}) {
  .column.is-one-quarter-ob {
    flex: none;
    width: 25%;
  }
}