@import "variables";

.frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 4px;
  width: 180px;
  height: 180px;

  .labeled-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 24px);
    justify-content: center;

    .error-icon {
      //font-size: 140%;
    }
  }

  .label,
  .file-path {
    color: $blue-300;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 6px;
  }

  .file-path {
    font-size: 12px;
  }

  .buttons-footer {
    height: 42px;
    padding: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
  }

  .clickable-icon {
    width: 100%;
    height: 100%;
    border-radius: 4px;

    &.disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }

  // .frame hover
  &:hover {
    .buttons-footer {
      opacity: 1;
      visibility: visible;
    }
  }


  // LIGHT THEME
  // --------------------------

  &.light-theme {
    background-color: $blue-50;
    .label {
      color: $blue-500;
    }
    .clickable-icon {
      color: $blue-500;
      background-color: transparent;
      transition: background-color 0.35s;
      &:hover {
        background-color: $blue-100;
      }
    }
  }


  // DARK THEME
  // --------------------------

  &.dark-theme {
    background-color: $blue-700;
    .label {
      color: $blue-200;
    }
    .clickable-icon {
      color: $blue-300;
      &:hover {
        background-color: $blue-500;
      }
    }
  }

}
